1.vue中指定的写法
<button @keyup.enter.native="xxxx">查询</button>
但是,这种方式只能在该按钮获取到光标之后才能绑定回车键,也就是说你需要先用鼠标点击一下触发绑定回车的操作。文章来源地址https://www.toymoban.com/news/detail-567017.html
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();
});
文章来源:https://www.toymoban.com/news/detail-567017.html
到了这里,关于vue按钮绑定回车(键盘事件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!