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 04 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JavaScript内置对象之Array的使用小结
May 12 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易混淆函数的区别及用法汇总
2014/11/22 PHP
php封装的smarty类完整实例
2016/10/19 PHP
用javascript实现自定义标签
2007/05/08 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
vue内置指令详解
2018/04/03 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
会计出纳岗位职责
2013/12/25 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL