H5禁止手机虚拟键盘弹出
点击输入框弹出自定义弹窗,输入框是input标:
但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加readonly属性,另一个就是在input事件处理方法前面添加一句 document.activeElement.blur()
。
使用readonly属性
使用readonly
方式来阻止虚拟键盘弹出应该是最简单最优雅的方式了。readonly 属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
值得一提的是它的取值,只要声明了readonly属性,不管取什么值都可以,比如readonly=""
、readonly="readonly"
、readonly="abc"
都是一样的
优点:简单
缺点:在iOS的Safari中无效(未做更多情况测试)
document.activeElement.blur()
这是个什么玩意儿?document.activeElement
是一个Web API接口。MDN上的解释是:它返回当前页面中获得焦点的元素,也就是说,如果此时用户按下了键盘上某个键,会在该元素上触发键盘事件,该属性是只读的。
document.activeElement
属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有用户输入(通常是按Tab键)、在代码中调用focus()
方法和页面加载。
它里面有很多方法,在浏览器控制台查看,可以看到有很都方法:
MDN上还展示了一个有意思的示例,看这里
那么document.activeElement.blur()
为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement
获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()
方法,blur
我相信大家都知道吧,就是取消聚焦。获得被聚焦的元素然后强制blur以达到没有聚焦的样子、、、感觉绕了。
优点:支持Android、iOS
缺点:需要添加额外的JS代码
这句代码加在什么地方?加入有如下HTML
<div class="calendar">
<div>
<input type="text" id="datePicker" class="date_picker" placeholder="点击选择入住日期"/>
</div>
</div>
那么这句JS加在事件处理方法中
$("#datePicker").focus(function(){
document.activeElement.blur();
});
H5禁止手机虚拟键盘弹出的更多相关文章
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...
- edittext禁止android软键盘弹出
1. EditText ed=(EditText) findViewById(R.id.test); ed.clearFocus(); 2. 在AndroidMainfest.xml中选择哪个acti ...
- H5页面IOS中键盘弹出导致点击错位的问题
IOS在点击输入框弹出键盘 键盘回缩 后 定位没有相应改变 还有 textarea 也会弹出键盘 $("input").blur(function() { console.l ...
- Android虚拟键盘弹出时挡住EditText解决方法
在manifest的activity节点使用 Xml代码 <activity android:windowSoftInputMode="adjustResize"/> ...
- 点击input框,不让手机软键盘弹出的办法
设置readonly="" <input type="text" readonly="" placeholder="请输入邮 ...
- Android 虚拟键盘弹出把底部栏顶上去的解决办法
在AndroidManifest中使用ActivityGroup的activity中加上:android:windowSoftInputMode="adjustPan"
- H5解决安卓软键盘弹出遮蔽的方法
首先先判断是否为安卓,是的话才添加事件监听,获取焦点元素判断是否为input或者textarea类型,是的话,Element.scrollIntoView() 方法会让当前的元素滚动到浏览器窗口的可视 ...
- Android软键盘弹出,覆盖h5页面输入框问题
之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...
随机推荐
- Office365创建通讯组
Office365创建通讯组 命令 new-DistributionGroup -Name 'test' -Members tom@msazure.cn 结果 命令 new-DistributionG ...
- leetcode个人题解——#48 rotage image
思路:本题要求不能利用额外的二维数组实现旋转,所以重点在于弄清矩阵旋转的数学方法. 我的方法是,首先按照副对角线进行对称,然后按照水平中轴线进行对称即可. class Solution { publi ...
- java高cpu占用和高内存占用问题排查 (转)
高cpu占用 1.top命令:Linux命令.可以查看实时的CPU使用情况.也可以查看最近一段时间的CPU使用情况. 2.PS命令:Linux命令.强大的进程状态监控命令.可以查看进程以及进程中线程的 ...
- QT中文乱码解决方法
由于我毕设的界面是用Qt做的,之前没怎么接触过Qt,所以实现过程中遇到不少小问题,头一个就是这个. 现如今宝宝将其记录下来,供同样有需要的同学或者自己以后方便查阅. 1.所有文件编码格式须一致 不统一 ...
- Android开发第二阶段(6)
今天:对sdcard的操作有了进一步的了解和深入,为程序可以自主扫描并添加sdcard的MP3格式文件 明天:最后的修正.
- 第二次作业——个人项目实战(sudoku)
第二次作业--个人项目实战(sudoku) 一.作业要求地址 第二次作业--个人项目实战 二.Github项目地址 softengineering1--sudoku 三.PSP表格估计耗时 PSP2. ...
- SGU 181 X-Sequence(一题比较水的求模找规律)
E - X-Sequence Time Limit:500MS Memory Limit:4096KB 64bit IO Format:%I64d & %I64u Submit ...
- 在Asp.Net中使用Redis【本文摘自智车芯官网】
Redis安装 在安装之前需要获取Redis安装包.在这里我们就不详细介绍安装包的获取了.这里Redis-x64-3.2.100.zip安装包为例通过dos命令取安装.通过dos命令找到安装目录. 在 ...
- 用vs调试项目的时候报HTTP 错误 403.14 - Forbidden
曾经遇到过这种诡异的问题,你一定想不到,这个可能是因为你用svn合并的时候,导致了你的dll文件出了问题. 竟然可以用主干的dll替换的方式,解决掉这个问题.
- 获取emacs安装的elpa包名称
| grep "./" | sed 's/\.\///g' | sed 's/-[0-9].*$//' | sort -u