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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
javascript 得到变量类型的函数
May 19 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
js实现漫天星星效果
Jan 19 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
基于node.js实现爬虫的讲解
Feb 18 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
php 归并排序 数组交集
2011/05/10 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php递归json类实例
2014/12/02 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
基于python实现对文件进行切分行
2020/04/26 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
2014大学生党员评议个人总结
2014/09/22 职场文书
工作会议通知
2015/04/15 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
导游词之天津盘山
2019/11/01 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript