Vue中怎么实现回车键切换焦点

　　介绍

这篇文章主要介绍了Vue中怎么实现回车键切换焦点,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

Vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

几乎在所有浏览器中,都具有Tab键切换焦点的功能。

但是任性的用户强烈要求一定要有输入键切换焦点的功能。

为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求。

在上一代人中,大多都有这种操作习惯。习惯把保存成为编辑,习惯用回车替换标签。这是受到微软excel荼毒的结果。

起初我以为这个功能很简单,无非就是把输入键的功能转接到Tab键上面,分分钟就可以解决掉的问题。

可困难马上就出现了,我发现这条路是走不通的。

我们经常可以主动触发某个事件,比如<代码> el.click()> dispatchEvent>

我查阅了很多资料,也做了很多尝试。最后总结出来一个结论,在浏览器中,JavaScript无法操作用户的键盘或者鼠标,这是出于安全策略的考虑。仔细想一下,如果可以用一段JavaScript脚本控制用户键盘和鼠标的话,那么用户只需要打开一个黑客网站,黑客就可以瞬间得到他想得到的一切。

所以,如果要通过除Tab键以外的其他方式来触发焦点切换,<代码> 集中几乎是唯一的选择。

在原生页面中实现回车键切换焦点

项目是基于Vue和element-ui做的,为了把实现思路先讲清楚,暂时把这些抛开,从原生的页面中寻找答案。

以下是一个原生的html页面。

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,& lt; head> 　　,& lt; meta  charset=皍tf-8",/比; 　　,& lt; meta  name=皏iewport",内容=?device-width"宽度,/比; 　　,& lt; title> Demo 　　,& lt;/head> 　　,& lt; body> 　　,& lt; form> 　　,& lt; input 占位符=靶彰?/比; 　　,& lt; input 占位符=靶员稹?/比; 　　,& lt; input 占位符=澳炅洹?/比; 　　,& lt;/form> 　　,& lt;/body> 　　& lt;/html>

接下来要实现通过回车键切换焦点,我把思路梳理如下:

<李>

监听回车键按下事件。

<李>

获取当前聚焦元素。

<李>

获取下一个要被聚焦的元素。

<李>

切换焦点。

思路有了,实现起来也非常简单。

1。监听回车键按下事件

在文档中添加脚本标签,写入如下代码。

function  enterCallback (e), { 　　,if  (e.keyCode ===, 13), { 　　,//按下回车后的逻辑 　　,} 　　} 　　window.addEventListener (“keydown", enterCallback);

要注意,<代码> enterCallback 单独拿出来,用于注销监听事件。

监听按键事件最常用的方法就是使用事件委托,将事件绑定到<代码>窗口>

判断按下哪个键的方式有很多,比如判断<代码> e。关键,<代码> e。或者<代码> e。键码> e。键码> 键码代码表。

<人物>

Vue中怎么实现回车键切换焦点

2。获取当前聚焦元素

很容易就可以做到这一步。

常见的有两种方式第。一种是<代码> e。目标> 文档。activeElement> function  enterCallback (e), { 　　,if  (e.keyCode ===, 13), { 　　,let  activeEl =, document.activeElement; 　　,} 　　}

3。获取下一个要被聚焦的元素

这一步也比较容易。使用<代码> el。nextElementSibling> function  enterCallback (e), { 　　,if  (e.keyCode ===, 13), { 　　,let  activeEl =, document.activeElement; 　　,let  nextEl =, activeEl.nextElementSibling; 　　,} 　　}

Vue中怎么实现回车键切换焦点