Vue键盘监听事件(回车键)
方法一:回车键监听的例子回车键调用search方法<input v-on:keyup.enter="search">简写<input @keyup.enter="search">在ElementUI组件框架中<input @keyup.enter.native="search">方法的使用前提是使用的当前元素必须要获取focus焦点,如果没有获取到焦点,绑定就会
·
方法一:回车键监听的例子
回车键调用search方法
<input v-on:keyup.enter="search">
简写
<input @keyup.enter="search">
在ElementUI组件框架中
<input @keyup.enter.native="search">
方法的使用前提是使用的当前元素必须要获取focus焦点,如果没有获取到焦点,绑定就会失效,因此给div或者p进行事件监听时,这种方法显示是不适用的;
方法二:document.addEventListener监听keyup事件
mounted() {
// 绑定enter事件
this.enterKeyup();
},
destroyed() {
// 销毁enter事件
this.enterKeyupDestroyed();
},
methods: {
enterKey(event) {
const componentName = this.$options.name;
if (componentName == "Login") {
const code = event.keyCode
? event.keyCode
: event.which
? event.which
: event.charCode;
if (code == 13) {
this.login();
}
}
},
enterKeyupDestroyed() {
document.removeEventListener("keyup", this.enterKey);
},
enterKeyup() {
document.addEventListener("keyup", this.enterKey);
},
// 登录
login() {}
}
全部的键盘别名:
.enter
.tab
.delete “退格”和“删除”
.esc
.space
.up
.down
.left
.right
更多推荐
已为社区贡献4条内容
所有评论(0)