vue 实现移动端键盘搜索事件监听


Posted in Javascript onNovember 06, 2019

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://3water.com/article/173684.htm(微信内置开发 iOS修改键盘“换行”为“搜索”)

以上这篇vue 实现移动端键盘搜索事件监听就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
将查询条件的input、select清空
Jan 14 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php判断linux下程序问题实例
2015/07/09 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
解放web程序员的输入验证
2006/10/06 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
秘书岗位职责
2013/11/18 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
保险公司增员口号
2015/12/25 职场文书
初中历史教学反思
2016/02/19 职场文书
分家协议书范本
2016/03/22 职场文书