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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
js实现微信聊天界面
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
Zend引擎的发展 [15]
2006/10/09 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
PHP守护进程实例
2015/03/06 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python中实现的RC4算法
2015/02/14 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python最小二乘法矩阵
2019/01/02 Python
python学生管理系统
2019/01/30 Python
python提取log文件内容并画出图表
2019/07/08 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
wxPython色环电阻计算器
2019/11/18 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
大学生入党自我鉴定
2013/10/31 职场文书
青年文明号事迹材料
2014/01/18 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
培训讲师岗位职责
2014/04/13 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
给校长的建议书100字
2014/05/16 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
超市采购员岗位职责
2015/04/07 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书