Html5网页页面上怎样严禁手机上虚似电脑键盘弹出

2020-10-09 15:58 jianzhan

工作中中遇到以下要求,点一下键入框弹出自定弹窗,键入框是input标识:

可是在挪动端,input会默认设置开启手机上的虚似电脑键盘,怎样阻拦手机上虚似电脑键盘弹起呢?现阶段我试过有两个计划方案,1个是给input加上readonly特性,另外一个便是在input恶性事件解决方式前面加上1句document.activeElement.blur() 。

readonly

应用readonly方法来阻拦虚似电脑键盘弹出应当是最简易最佳雅的方法了。readonly 特性要求键入字段为写保护。写保护字段是不可以改动的。但是,客户依然可使用 tab 键切换到该字段,还能够选定或复制其文字。

值得1提的是它的赋值,要是申明了readonly特性,无论取甚么值都可以以,例如readonly=""、readonly="readonly"、readonly="abc"全是1样的

优势:简易
缺陷:在iOS的Safari中失效(未做更多状况检测)

document.activeElement.blur()

这是个甚么玩意?document.activeElement是1个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">
    <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手机上电脑键盘弹出內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!