vue按钮绑定回车(键盘事件)
vue中按钮绑定键盘
·
1.vue中指定的写法
<button @keyup.enter.native="xxxx">查询</button>
但是,这种方式只能在该按钮获取到光标之后才能绑定回车键,也就是说你需要先用鼠标点击一下触发绑定回车的操作。
2.vue3中在 onMounted中监听键盘的keydown方式,这种方式不需要按钮获取到焦点
const keydownEvent = () => {
document.onkeydown = (e: any) => {
if (e.defaultPrevented) {
return;
}
const body = document.getElementsByTagName('body')[0];
// match(xxxx应填写文件在浏览器中的地址,不需要包括https、http或者www),这里是为了防止其他页面触发
if (e.keyCode === 13 && e.target.baseURI.match("xxxx") && e.target === body) {
console.log("按下了回车键");
xxxx(); //需要调用的方法
}
};
};
onMounted(() => {
keydownEvent();
});
更多推荐
已为社区贡献2条内容
所有评论(0)