vue 项目软键盘回车触发搜索事件


Posted in Javascript onSeptember 09, 2020

目的:掉起来右下角为搜索的按钮

步骤:

1、input的type改为search,再写keydown按下时的事件调取搜索事件的方法

这样安卓手机上回车就变成了“搜索”,不过ios仍然是换行

2、input 外面套form,必须要有action,action=“javascript:return true”

我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur

<form @submit.prevent="formSubmit" action="javascript:return true">
    <van-field
     v-model='deviceCode'
     type='tel'
     placeholder="输入设备唯一码"
     clearable
     @blur="blur"
     @keydown="search($event)"
    />
</form>
formSubmit () {
 return false
}

补充知识:在ios中,input唤出软键盘中‘换行'转‘搜索'、‘前往',及直接唤醒数字键盘的实现(vue)

如下所示:

<input type="text" />

<form>
      <input type="text" placeholder="输入"> 
</form>

软键盘显示的都是

vue 项目软键盘回车触发搜索事件

想要实现如图‘换行'变‘前往':

vue 项目软键盘回车触发搜索事件

代码如下:

<form action="javascript:return true">
    <input type="text" placeholder="请输入">
</form>

想要实现如图‘换行'变‘搜索':

vue 项目软键盘回车触发搜索事件

<form action="javascript:return true">
      <input type="search" placeholder="请输入姓名">
</form>

重点:

1:放在form标签内。

2:在form标签内加上action=”javascript:return true”

直接唤醒数字键盘

直接唤醒数字九键的键盘:

vue 项目软键盘回车触发搜索事件

<input type="text" pattern="[0-9]*" placeholder="请输入数字1">

这时候如果如下代码把input标签放到表单标签内,则直接显示26键带有标点符号的数字键盘:

vue 项目软键盘回车触发搜索事件

<form action="javascript:return true">
      <input type="number" placeholder="请输入数字2">  <!--显示26键数字键盘,带有标点符号-->
</form>

以上这篇vue 项目软键盘回车触发搜索事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
AngularJS日期格式化常见操作实例分析
May 17 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 #Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 #Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 #Javascript
JavaScript代码简化技巧实例解析
Sep 09 #Javascript
vue 手机物理监听键+退出提示代码
Sep 09 #Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 #Javascript
关于vue的列表图片选中打钩操作
Sep 09 #Javascript
You might like
example2.php
2006/10/09 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python 实现让字典的value 成为列表
2019/12/16 Python
python函数定义和调用过程详解
2020/02/09 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
青安岗事迹材料
2014/05/14 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
高三英语复习计划
2015/01/19 职场文书
中学教师教学工作总结
2015/08/13 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书