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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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引用效率问题分析
2012/03/23 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
ionic3 懒加载
2017/08/16 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python实现电脑自动关机
2018/06/20 Python
python for和else语句趣谈
2019/07/02 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
自荐信格式范文
2013/10/07 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python