Html5页⾯上如何禁⽌⼿机虚拟键盘弹出
⼯作中遇到如下需求，点击输⼊框弹出⾃定义弹窗，输⼊框是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()⽅法和页⾯加载。
它⾥⾯有很多⽅法，在浏览器控制台查看，可以看到有很都⽅法：
那么document.activeElement.blur()为什么可以阻⽌虚拟键盘弹出呢？原因是：当你点击input的时
候，document.activeElement获得了DOM中被聚焦的元素，也就是你点击的input，⽽调⽤.blur()⽅法，blur我相信⼤家都知道吧，就是取消聚焦。获得被聚焦的元素然后强制blur以达到没有聚焦的样⼦、、、感觉绕了。
优点：⽀持Android、iOS
缺点：需要添加额外的JS代码
这句代码加在什么地⽅？加⼊有如下HTML
<div class="calendar">
html document是什么<div>
<input type="text" id="datePicker" class="date_picker" placeholder="点击选择⼊住⽇期"/>
</div>
</div>
那么这句JS加在事件处理⽅法中
$("#datePicker").focus(function(){
document.activeElement.blur();
});
总结
就当前需求来说，⽤document.activeElement.blur()确实是在绕弯⼦，直接使⽤readonly是最佳⽅案。但是
document.activeElement很强⼤，可以做很多事。
到此这篇关于Html5页⾯上如何禁⽌⼿机虚拟键盘弹出的⽂章就介绍到这了，更多相关Html5⼿机键盘弹出内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。