VUE 是否可以用Tab事件替换回车事件?

题目描述

项目使用vue 2.x, element-ui
客户有一个需求: 客户习惯使用回车键去切换页面上的控件焦点,客户想在按键盘上的回车键的时候去实现下一个组件获取焦点并继续操作(用户不想按Tab键)。

问题:
在vue中如何实现以下效果: 当用户按键盘上的回车键时就相当于他按了键盘上的Tab键所产生的效果。

题目来源及自己的思路

当前解决办法是:

  1. 在每个页面上添加一个数组对象去维护页面上所有的组件。
  2. 在页面上的每个text框和select框上面设置一个ref="XXX"引用。
  3. 在页面上的每个text框和select框上面添加 @keyup.enter.native="selectXXX" 事件去获取下一个组件的ref 并获取焦点。

大家有没有什么更好的解决方案? 最好能全局替换掉回车事件,而不需要每个页面都去单独写这些事件控制代码。

阅读 8.9k
4 个回答

我也在寻找,目前并没找到好办法....

新手上路,请多包涵

提供一个思路给你,在触发enter事件的时候,模拟tab事件触发

推荐问题