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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
Javascript实现关闭广告效果
Jan 29 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP7.0版本备注
2015/07/23 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
java直接调用python脚本的例子
2014/02/16 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
在python中修改.properties文件的操作
2020/04/08 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
党员创先争优公开承诺书
2014/03/28 职场文书
个人工作表现评语
2014/04/30 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
汽车转让协议书
2015/01/29 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Mysql文件存储图文详解
2021/06/01 MySQL
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js