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清空多文本框、文本域示例代码
Feb 24 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
js自定义回调函数
2015/12/13 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
python开发入门——列表生成式
2020/09/03 Python
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
个人收入证明范本
2014/01/12 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
节能减耗标语
2014/06/21 职场文书
政风行风评议整改方案
2014/09/15 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书