主动触发input框的失去焦点事件,阻止输入法跳出
今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来,
网上一个方法是:在input框的获取焦点事件里,主动触发失去焦点事件,这样就阻止输入法的弹出了,很好,上个代码:
<input type="text" class="nameInput birthDayInput" placeholder="点击选择生日日期" @focus="openPicker()" v-model="comInfo.birthday">
openPicker() {
document.activeElement.blur();//主动触发onblur事件,是原生的js哟
this.$refs.picker.open();//这个方法不要管,是其它代码
},
主动触发input框的失去焦点事件,阻止输入法跳出的更多相关文章
- 【JS】 伪主动触发input:file的click事件
大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...
- input中blur失去焦点事件与点击事件冲突时如何解决
方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...
- 通过定时监听input框来实现onkeyup事件-
问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...
- 如何让input框自动获得焦点
项目中有个需求 一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name= ...
- input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?
怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...
- Vue触发input选取文件点击事件
CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- 吐血bug-- 多个input框接连blur事件导致alert接连弹出
本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...
随机推荐
- AI金融知识自学偏量化方向-了解不同类型的机器学习2
有监督学习 vs 无监督学习 迭代和评估 偏差方差权衡 结合有监督学习和无监督学习(半监督学习)
- Matlab如何循环读取文件
循环读取图片第一种方法①List =dir('*.jpg'); %如需其它图片格式支持,可以自己[重载dir()]函数,实现查找所有图片文件的功能,%如果图片是其它路径,可以用 ["路径&q ...
- AES和RSA算法的demo代码
aes代码示例: package com.autoyol.util.security.test; import java.security.Key; import java.security.NoSu ...
- Keras查看model weights .h5 文件的内容
Keras的模型是用hdf5存储的,如果想要查看模型,keras提供了get_weights的函数可以查看: for layer in model.layers: weights = layer.ge ...
- django 同步数据库出现 No changes detected 的可能原因
在使用 python manage.py makemigrations时候会出现:No changes detected 的错误. 造成这个错误的原因可能有很多. 我这里遇到这个错误的原因是:migr ...
- [JS] ECMAScript 6 - Variable : compare with c#
前言 范围包括:ECMAScript 新功能以及对象. 当前的主要目的就是,JS的学习 --> ECMAScript 6 入门 let 命令 js 因为let, i的范围限制在了循环中. var ...
- 【Latex】常用工具包
字体篇: \usepackage{color} {\color{red}{Hello World!}} 表格篇: 1.resizebox \begin{table*}[!htb] \centering ...
- 【SpringCloud微服务实战学习系列】服务治理Spring Cloud Eureka
Spring Cloud Eureka是Spring Cloud Netflix微服务中的一部分,它基于NetFlix Sureka做了二次封装,主要负责完成微服务架构中的服务治理功能. 一.服务治理 ...
- trace/trace2命令
send REPLICAT REP_1B trace2 /home/oracle/trace2.log send REPLICAT REP_1B trace /home/oracle/trace.lo ...
- C++判断是否连接服务器
BOOL CheckServerStatus::isConnectServer(CString serverName, int serverPort) { CString strURL; strURL ...