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，并且阻止表单的默认行为

<form @submit.prevent></form>

具体代码：

标签：

<form  @submit.prevent action="#">
      <input v-model="keyword" placeholder="请输入搜索内容" ref="searchInput" type="serch" v-searchFocus @keypress="searchGoods">
  </form>

methods中事件：

searchGoods (event) {
            if (event.keyCode == 13) {
                event.preventDefault(); //禁止默认事件（默认是换行）
                this.keyword = event.target.value;
                this.selectedProd();
            }
        }