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 关闭IE6、IE7
Jun 01 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php导入导出excel实例
2013/10/25 PHP
php创建无限级树型菜单
2015/11/05 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
使用python存储网页上的图片实例
2018/05/22 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
模具专业推荐信
2013/10/30 职场文书
淘宝好评语大全
2014/05/05 职场文书
安全教育的主题班会
2015/08/13 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS