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 常用方法基础教程
Feb 06 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
May 03 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
JS排序之快速排序详解
Apr 08 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue实现购物车的监听
Apr 20 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
php实现用于删除整个目录的递归函数
2015/03/16 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
看了就知道什么是JSON
2007/12/09 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python类的动态修改的实例方法
2017/03/24 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
对python中list的五种查找方法说明
2020/07/13 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
如何用Python绘制3D柱形图
2020/09/16 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
创业融资计划书
2014/04/25 职场文书
社会实践活动报告
2015/02/05 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
跳高加油稿
2015/07/21 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang