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的面向对象方法以及差别
Mar 31 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
js实现日历的简单算法
2017/01/24 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
python定时执行指定函数的方法
2015/05/27 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
四年大学自我鉴定
2014/02/17 职场文书
简历里的自我评价范文
2014/02/24 职场文书
干部下基层实施方案
2014/03/14 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python