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 相关文章推荐
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
搞定immutable.js详细说明
May 02 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python发送伪造的arp请求
2014/01/09 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Django中多种重定向方法使用详解
2019/07/17 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
Ruby如何创建一个线程
2013/03/10 面试题
大学生村官座谈会发言材料
2014/05/25 职场文书
班级读书活动总结
2014/06/30 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
心理学培训心得体会
2016/01/22 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle