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之对系统的toFixed()方法的修正
May 08 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
JavaScript 实现页面滚动动画
Apr 24 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连接access数据库
2008/03/27 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python 数据加密代码
2008/12/24 Python
python判断windows隐藏文件的方法
2014/03/21 Python
python实现图片筛选程序
2018/10/24 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python3转换code128条形码的方法
2019/04/17 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
自荐书封面下载
2013/11/29 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
前处理班长职位说明书
2014/03/01 职场文书
空乘英文求职信
2014/04/13 职场文书
餐饮投资计划书
2014/04/25 职场文书
高中生逃课检讨书
2014/10/10 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
关于分班的感言
2015/08/04 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
golang 实现Location跳转方式
2021/05/02 Golang