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();
            }
        }

你可能感兴趣的:(vue 移动端键盘搜索事件监听(转))