我在工作中遇到了以下需求。点击输入框弹出自定义弹窗。输入框即输入标签:但在移动端,输入默认会触发手机虚拟键盘。如何防止手机虚拟键盘弹出?目前我尝试了两种方案,一种是给input加上readonly属性,另一种是在input事件处理方法前加一句document.activeElement.blur()。readonly使用readonly方法防止虚拟键盘弹出应该是最简单优雅的方式。readonly属性指定输入字段是只读的。只读字段不能修改。但是,用户仍然可以跳转到该字段并选择或复制其文本。值得一提的是它的值,只要声明了readonly属性,不管取什么值,比如readonly="",readonly="readonly",readonly="abc"都是一样的优点:简单缺点:InvalidiniOSSafari(没有做更多测试)document.activeElement.blur()这是什么东西?document.activeElement是一个WebAPI接口。MDN上的解释是:返回当前页面中获得焦点的元素,即此时用户按下键盘上的某个键,该元素将触发键盘事件,该属性为只读。document.activeElement属性始终引用DOM中当前获得焦点的元素。元素通过用户输入(通常是按Tab键)、在代码中调用focus()方法和页面加载来获得焦点。里面有很多方法,可以看到浏览器控制台也有很多方法:MDN也展示了一个有趣的例子,看这里,那么为什么document.activeElement.blur()可以阻止虚拟键盘弹出呢?原因是:当你点击input时,document.activeElement获取到DOM中获得焦点的元素,也就是你点击的input,调用了.blur()方法。模糊,相信大家都知道,就是散焦。获取聚焦元素,然后强制模糊以实现未聚焦的外观、感觉。优点:支持Android和iOS缺点:需要添加额外的JS代码这段代码添加在哪里?添加如下HTML
