详解在vue项目当中绑定键盘事件

逝水年华 · 发表于 2022-6-29 16:53:56

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。

按照vue官网给出的方法是：

v-on:keyup.enter

简写：

@keyup.enter

如果是绑定在组件上的话，需要加native修饰符

[HTML]

<el-input
v-focus
:placeholder="$t('enterPoolName')"
v-model.trim="strPool"
:maxlength="100"
@keyup.enter.native="handleSearchMember"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

复制代码

但是，这种方式只能是在获取焦点的时候起作用，如果失去焦点，则无法执行键盘事件。

如果，项目有需求在失去焦点的时候，仍然能够执行相应的键盘事件，完成既定的行为动作，诸如提交表单登录等等。

那就需要采取常规的方法，将键盘事件绑定在document文档上，然后通过获取键盘上各个按键的值，进行键盘事件的执行响应。

[JavaScript]

mounted() {
const that = this;
document.addEventListener('keydown', that.handleWatchEnter);
},
methods: {
handleWatchEnter(e) {
var key = window.event ? e.keyCode : e.which;
console.log(key);
if (key === 13) {
// 这里执行相应的行为动作
console.log('++++');
}
},
}

复制代码

vue中的扣键盘事件

@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)

获取按键的键码 e.keyCode

@keyup.13    按回车键

@keyup.enter 回车

@keyup.up 上键

@keyup.down  下键

@keyup.left    左键

@keyup.right 右键

@keyup.delete 删除键

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

详解在vue项目当中绑定键盘事件

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com