vue中enter回车键事件

最新推荐文章于 2025-10-10 09:29:25 发布

原创最新推荐文章于 2025-10-10 09:29:25 发布 · 1.8w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue项目中，为了提升用户体验，产品经理建议在用户输入商品名称后按Enter键即可触发搜索，而不再依赖于blur事件。实现这一功能，可以使用@keyup.enter.native监听键盘回车事件，结合v-model绑定的搜索关键字，调用搜索方法。当用户在input输入框失去焦点时的传统搜索逻辑可以保留，与enter键触发的搜索形成互补。通过这种方式，结合keydown、keyup和input事件，可以更好地控制和响应用户的输入行为。

项目中在搜索商品时，在没有搜索按钮的情况下，刚开始是写的当用户输入完成后，input框失去焦点blur事件处理，产品提议用户输入后，按enter回车键返回搜索结果。

vue中失去焦点事件写法：@blur
vue中enter回车键事件写法：@keyup.enter.native

<el-input v-model="searchName" @keyup.enter.native="toSearch()" placeholder="请输入搜索的名称"></el-input>

toSearch(){
 	console.log("搜索名称是：",this.searchName)
}

补充知识点：

keydown、keyup 属于键盘事件，input 属于文本事件

详细说明：

keydown：当用户按下键盘上的任意按键时触发，如果按住不放，会重复触发此事件。
keyup：当用户释放键盘上的按键时触发。
input：当元素内容发生改变时触发，这些元素指input、select、textarea 和指定了 contenteditable 属性的元素。

举例：

当我们在一个输入框中输入文本时，会依次触发下列事件：keydown 事件 ——> input 事件 ——> keyup 事件。