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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
详解Python装饰器
2019/03/25 Python
Python 项目转化为so文件实例
2019/12/23 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
增大python字体的方法步骤
2020/07/05 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
python 写一个水果忍者游戏
2021/01/13 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
yy司仪主持词
2014/03/22 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
党员志愿者活动总结
2014/06/26 职场文书
公司年底活动方案
2014/08/17 职场文书
2014年加油站工作总结
2014/12/04 职场文书
高考学习决心书
2015/02/04 职场文书
预备党员自我评价范文
2015/03/04 职场文书
小学生家长意见
2015/06/03 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL