主动触发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框,在失去焦点后 ...
随机推荐
- 【iCore1S 双核心板_ARM】例程四:USART通信实验——通过命令控制LED
实验原理: 开发板上自带一片CH340芯片,完成本实验电脑需要安装CH340驱动, CH340的TXD连接STM32的GPIO(PB6),CH340的RXD连接STM32的 GPIO(PB7),通过串 ...
- 【iCore1S 双核心板_FPGA】例程十:乘法器实验——乘法器的使用
实验现象: 通过FPGA 的一个I/O 口连接LED:设定I/O 为输出模式.内部乘法器完成乘法计算后改变输出LED 的状态(红色LED 闪烁). 核心代码: module MULT( input C ...
- 教你一招:笔记本安装mint18时,安装界面显示不全
近日在给自己的笔记本安装mint18时,安装界面显示不全,就是安装时到了分区界面后看不到下一步. 很无奈.... 于是胡乱摸索,得到解决的办法. 按住键盘上的ALT键,用鼠标向上拖动安装的界面,最好是 ...
- SpringBoot------如何将项目打成war包
1.修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:/ ...
- 18职责链模式CoR
一.什么是职责链模式 Chain of Responsibility(CoR)模式也叫职 责链模式或者职责连锁模式,是行为模式之一, 该模式构造一系列分别担当不同的职责的类的对 象来共同完成一个任务, ...
- Python实现Linux命令xxd -i功能
目录 Python实现Linux命令xxd -i功能 声明 一. Linux xxd -i功能 二. xxd -i常见用途 三. 类xxd -i功能的Python实现 Python实现Linux命令x ...
- sencha touch Model validations 自定义验证 二选一输入验证、重复验证、时间验证、比较验证、条件验证(2015-1-14)
项目初始化时执行以下代码 //重写模型,方便进行自定义验证 Ext.define("Ext.zh.data.Model", { override: "Ext.data.M ...
- AJAX基本操作 + 登录 + 删除 + 模糊查询
AJAX练习显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- tomcat的缺少tcnative-1.dll的解决(申明:来源于网络)
tomcat的缺少tcnative-1.dll的解决 地址:http://blog.csdn.net/topwqp/article/details/7713388
- ML.NET教程之情感分析(二元分类问题)
机器学习的工作流程分为以下几个步骤: 理解问题 准备数据 加载数据 提取特征 构建与训练 训练模型 评估模型 运行 使用模型 理解问题 本教程需要解决的问题是根据网站内评论的意见采取合适的行动. 可用 ...