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 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
Vue渲染函数详解
Sep 15 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php实现文件下载代码分享
2014/08/19 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
Javascript - HTML的request类
2006/07/15 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
python杀死一个线程的方法
2015/09/06 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python在不同条件下的输入与输出
2020/02/13 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Python 里最强的地图绘制神器
2021/03/01 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
校园报刊亭的创业计划书
2014/01/02 职场文书
党员实事承诺书
2014/03/26 职场文书
毕业实习计划书
2015/01/16 职场文书
公司员工管理制度
2015/08/04 职场文书