vue中enter回车键事件
项目中在搜索商品时,在没有搜索按钮的情况下,刚开始是写的当用户输入完成后,input框失去焦点blur事件处理,产品提议用户输入后,按enter回车键返回搜索结果。vue中失去焦点事件写法:@blurvue中enter回车键事件写法:@keyup.enter.native<el-input v-model="searchName" @keyup.enter.native="toSearch(
·
项目中在搜索商品时,在没有搜索按钮的情况下,刚开始是写的当用户输入完成后,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 事件。
更多推荐
所有评论(0)