vue点击input弹出带搜索键盘并监听该元素的方法


Posted in Javascript onAugust 25, 2018

1.遇到问题:

需要做一个点击input弹出带搜索的键盘。

解决:

input的type="search",可弹出带搜索的键盘。并监听搜索按钮,请求数据

<input @keyup.13="show()" type="search">

2.但是又遇到一个新的问题:

点击搜索之后键盘没有收回。

解决:

通过$refs获取input

监听搜索按钮,添加.blur()

<input @keyup.13=show() type="search" ref="input1">
show(){
 this.$refs.input1.blur();
}

3.测试时发现ios无法弹出带搜索的键盘

解决:

给input外加一层from

<form action="javascript:return true;">
 <input @keyup.13=show() type="search" ref="input1">
</form>
show(){
 this.$refs.input1.blur();
}

以上这篇vue点击input弹出带搜索键盘并监听该元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
js动态创建标签示例代码
Jun 09 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 #Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 #Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 #Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 #Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 #Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python读写zip压缩文件的方法
2018/08/29 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
李开复演讲稿
2014/05/24 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2014年度考核工作总结
2014/12/24 职场文书
入党函调证明材料
2015/06/19 职场文书
祝寿主持词
2015/07/02 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python