vue 实现移动端键盘搜索事件监听
更新时间：2019年11月06日 15:31:46 作者：董瑞南
今天小编就为大家分享一篇vue 实现移动端键盘搜索事件监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、首先注意，input的type="serch"
<input @keypress="searchGoods" type="serch" placeholder="搜索商品">
2、监听keypress事件
（1）KeyDown、KeyUp 事件
这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。）
（2）KeyPress 事件
此事件当用户按下和松开一个 ANSI 键时发生。
3、阻止事件默认行为
methods中添加 searchGoods方法，
判断keyCode ==13
阻止默认事件（默认是换行）
通过event.target.value获取要搜索的值，调用搜索接口。
searchGoods(event) {
if (event.keyCode == 13) { //如果按的是enter键 13是enter
event.preventDefault(); //禁止默认事件（默认是换行）
console.log(event.target.value)
Toast("点击了确认")
}
}
4、大家在项目中会发现，ios上系统软键盘，keycode=13的叫换行，对于客户体验而言，非常不好，能不能修改软键盘的文案呢，答案是肯定的，解决办法移步另一篇文章。
https://www.jb51.net/article/173684.htm（微信内置开发 iOS修改键盘“换行”为“搜索”）
以上这篇vue 实现移动端键盘搜索事件监听就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何实时往数组里追加数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
props是Vue3中的一个重要概念,它允许我们将数据从父组件传递到子组件,下面这篇文章主要给大家介绍了关于vue3中使用props和emits并指定其类型与默认值的相关资料,需要的朋友可以参考下2023-04-04
Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue页面跳转传递参数及接收方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本篇文章主要介绍了vue实现app页面切换效果实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Vue的兼容性解决方案Babel-polyfill的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
本文主要介绍了Vue+Node.js+WebSocket实现即时通讯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了web项目开发中VUE的混入与继承原理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2021-09-09
Vue实例中生命周期created和mounted的区别详解
这篇文章主要给大家介绍了关于Vue实例中生命周期created和mounted区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
最新评论