vue 匹配键盘输入_vue 移动端键盘搜索事件监听(转)

前言：KeyPress 和KeyDown 、KeyPress之间的区别

虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.

keydown：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发(opera浏览器除外)。

keypress：用户按下一个按键，并产生一个字符时发生(也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发)。一直按着某按键则会不断触发。

keyup：用户释放某一个按键是触发。

正文

1、input的type="serch"

2、监听keypress事件

3、阻止事件默认行为(默认为换行)

通过event.target.value获取要搜索的值

4、处理ios上系统软键盘，keycode=13的叫换行问题，提升客户体验。

input 外面包一层form，并且阻止表单的默认行为

具体代码：

标签：

methods中事件：

searchGoods (event) {

if (event.keyCode == 13) {

event.preventDefault(); //禁止默认事件(默认是换行)

this.keyword = event.target.value;

this.selectedProd();

}

}