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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
英文版银行求职信
2013/10/09 职场文书
高中军训感言400字
2014/02/24 职场文书
班干部演讲稿
2014/04/24 职场文书
酒店节能降耗方案
2014/05/08 职场文书
关于保护环境的标语
2014/06/09 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
PHP解决高并发问题
2021/04/01 PHP
解决Go gorm踩过的坑
2021/04/30 Golang
mysql如何能有效防止删库跑路
2021/10/05 MySQL