vue.js 键盘enter事件的使用

xiaoxiao2025-08-09  31

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">

在使用过程中,如果页面只针对一个Input添加键盘enter事件,可以直接按照官方文档定义的别名增加相应事件就可以了

但是如果是要对页面的button添加enter键盘事件,就不能写在input或者button上,因为获取不到焦点,这时候可以直接写在created里,如下:


<template> <div class="form-inline col-sm-12">

// 错误写法:这么写没有生效 <input class="form-control search-input" type="search" placeholder="输入用户名进行搜索" aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember">

<button class="btn btn-primary btn-sch" type="button" @click="goSearch">搜索</button> </div> </template> <script> export default { name: 'searchMember', data() { return { search_value: '' } },

//不能直接将事件添加写在input上,因为这样必须焦点在input上才能触发,所以可以直接绑定在document上即可 created() {var lett = this;document.onkeydown = function(e) {var key = window.event.keyCode;if (key == 13) {lett.enterSearchMember();} } }, methods: { goSearch: function() { let search_nick = this.search_value; if (search_nick !== 0) { this.$emit('searchMember', search_nick) } }, enterSearchMember() { this.goSearch() } } } </script>


补充一个问题:

当我们对input添加enter键盘事件后,点击enter页面会刷新,可能是因为你把input写在了form里,form会自动提交一次,页面就是一个刷新的效果,这样体验并不好

解决办法:

1、去掉form

2、如果非得用表单,只要不让表单里有且只有一个文本框就OK了

3、在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交


vue全部的按键别名:

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right
转载请注明原文地址: https://www.6miu.com/read-5034565.html

最新回复(0)