手机总是弹出可用虚拟键盘,手机屏幕弹出可用虚拟键盘怎么关

　　当你在工作中满足以下要求时，点击输入框，弹出自定义弹出窗口，输入框就是输入标签:

　　但是在移动端，输入会默认触发手机的虚拟键盘。如何防止手机虚拟键盘弹出？目前我尝试了两种方案，一种是在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()可以阻止虚拟键盘弹出呢？原因是：当你点击输入时，document.activeElement获取DOM中的焦点元素，也就是你点击的输入，并调用。blur()方法。模糊，我相信你们都知道，是为了分散注意力。获得聚焦的元素，然后强制模糊看起来不聚焦。感觉好像没了。

　　优点：支持Android和iOS

　　缺点：需要添加额外的JS代码。

　　这段代码加在哪里？添加以下HTML

　　class= calendar div input type= text id= date picker class= date _ picker placeholder= click to select check-in date /div/div然后将此JS添加到事件处理方法中。

　　$(#datePicker )。focus(function(){ document . active element . blur()；});总结

　　就目前的需求而言，使用document.activeElement.blur()确实是一种迂回的方式，直接使用readonly是最好的解决方案。但是document.activeElement功能强大，可以做很多事情。

　　关于如何在Html5页面禁止手机虚拟键盘弹出的这篇文章到此为止。更多相关Html5手机键盘弹出内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。