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 相关文章推荐
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
Vue formData实现图片上传
Aug 20 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
react 生命周期实例分析
May 18 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
python多线程方式执行多个bat代码
2016/06/07 Python
python中的字典使用分享
2016/07/31 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python远程连接MySQL数据库
2019/04/19 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
破坏寝室公物检讨书
2014/11/17 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL