互联网技术 · 2024年2月15日

Vue项目中的el-input键盘事件

一、 结合elemt-ui的 el-input 输入框 ,当输入之后敲回车想要搜索

@keydown.enter.native=”searchEnterFun”

二、普通input的键盘事件

非 element-UI 组件,直接 @keyup.enter 就可以。

在methods方法里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值

searchEnterFun:function(e){

var keyCode = window.event? e.keyCode:e.which;

// console.log(回车搜索,keyCode,e);

if(keyCode == 13 && this.input){

this.$router.push({path:/Share?keywords=+this.input});

}

}

which 和 keyCode 属性提供了解决浏览器的兼容性的方法。

keyCode属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码

注意:

在 Firefox 中,keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决:

文章来源:田珊珊个人博客

来源地址:http://www.tianshan277.com/759.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.