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 学习 - 提高篇
Feb 02 Javascript
了解一点js的Eval函数
Jul 26 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
常用的9个JavaScript图表库详解
Dec 19 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue调用语音播放的方法
Sep 27 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如何连接sql server
2015/10/16 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
numpy 声明空数组详解
2019/12/05 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
python中的列表和元组区别分析
2020/12/30 Python
如何编写python的daemon程序
2021/01/07 Python
关于礼仪的演讲稿
2014/01/04 职场文书
趣味运动会策划方案
2014/06/02 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
人生遥控器观后感
2015/06/11 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers