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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
理解javascript中的with关键字
Feb 15 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python作用域用法实例详解
2016/03/15 Python
Python检查ping终端的方法
2019/01/26 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python实现梯度下降法
2020/03/24 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
自主招生自荐信格式范文
2015/03/25 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers