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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
Angular 应用技巧总结
Sep 14 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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/04/13 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python实现杨辉三角思路
2017/07/14 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
set在python里的含义和用法
2019/06/24 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
会计电算化专业个人的自我评价
2013/11/24 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
村官个人总结范文
2015/03/03 职场文书
借款民事起诉状范文
2015/05/19 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL