Vue中实现回车键切换焦点的方法_vueenter切换光标 - CSDN文库

59 浏览量更新于2023-05-09 评论收藏 161KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue中实现回车键切换焦点的方法中实现回车键切换焦点的方法

主要介绍了在Vue中实现回车键切换焦点的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要

的朋友可以参考下

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

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

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

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

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

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

我们经常可以主动触发某个事件，比如 el.click() 就可以调用点击事件，或者使用 dispatchEvent 。但是键盘和鼠标事件却不行。

我查阅了很多资料，也做了很多尝试。最后总结出来一个结论，在浏览器中，JavaScript 无法操作用户的键盘或者鼠标，这是

出于安全策略的考虑。仔细想一下，如果可以用一段 JavaScript 脚本控制用户键盘和鼠标的话，那么用户只需要打开一个黑

客网站，黑客就可以瞬间得到他想得到的一切。

所以，如果要通过除 Tab 键以外的其他方式来触发焦点切换， focus 几乎是唯一的选择。

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<title>Demo</title>

</head>

<body>

<form>

<input placeholder="姓名" />

<input placeholder="性别" />

<input placeholder="年龄" />

</form>

</body>

</html>

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

1. 监听回车键按下事件。

2. 获取当前聚焦元素。

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

4. 切换焦点。

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

1.监听回车键按下事件监听回车键按下事件

在文档中添加 script 标签，写入如下代码。

function enterCallback(e) {

if (e.keyCode === 13) {

// 按下回车后的逻辑

}

}

window.addEventListener("keydown", enterCallback);

要注意， enterCallback 单独拿出来，用于注销监听事件。

监听按键事件最常用的方法就是使用事件委托，将事件绑定到 window 对象上。相比较给每一个元素都绑定一个事件的方式，

这样做的最大好处就是节省内存空间，性能更好。

判断按下哪个键的方式有很多，比如判断 e.key 、 e.code 或者 e.keyCode 等方式。但绝大多数的情况下都建议使用 e.keyCode 。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38655011

粉丝: 9
资源: 917

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈