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 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
在vue中使用Base64转码的案例
Aug 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP实现搜索相似图片
2015/09/22 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Python获取当前路径实现代码
2017/05/08 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
设置python3为默认python的方法
2018/10/31 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
Django实现celery定时任务过程解析
2020/04/21 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
优良学风班总结材料
2014/02/08 职场文书
会计毕业生自荐书
2014/06/12 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
怎么写工作检讨书
2014/11/16 职场文书
工作失职自我检讨书
2015/05/05 职场文书
城南旧事观后感
2015/06/11 职场文书
重阳节活动主持词
2015/07/04 职场文书
导游词之山海关
2019/12/10 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android