vue.js项目 el-input 组件 监听回车键实现搜索功能示例

Posted 2023-03-04

参考技术A 基于element-ui
组件
开发的vue.js项目，
实现回车键发起搜索，和原生的input
标签使用方法不一样：
el-input
监听键盘按下状态
得用@keyup.enter.native,如果是非el-input
组件，可以直接用@keyup.enter
<el-input
placeholder="搜索"
icon="search"
v-model="input"
:on-icon-click="pchandleIconClick"
@keyup.enter.native="searchEnterFun">
</el-input>
<input
placeholder="搜索"
type="text"
@keyup.enter="searchEnterFun">
在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
属性来解决：
var
keyCode
=
window.event
?
e.keyCode:e.which;
which
属性返回onkeypress事件触发的键的值的字符代码，或者
onkeydown
或
onkeyup
事件的键的代码
浏览器支持：谷歌、火狐、ie9、safari、欧朋
以上这篇vue.js项目
el-input
组件
监听回车键实现搜索功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解.vue文件中监听input输入事件（oninput）vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法