Html5頁面上怎么禁止手機(jī)虛擬鍵盤彈出

這篇文章主要介紹了Html5頁面上怎么禁止手機(jī)虛擬鍵盤彈出，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

工作中遇到如下需求，點(diǎn)擊輸入框彈出自定義彈窗，輸入框是input標(biāo)簽：

但是在移動(dòng)端，input會默認(rèn)觸發(fā)手機(jī)的虛擬鍵盤，如何阻止手機(jī)虛擬鍵盤彈起呢？目前我試過有兩個(gè)方案，一個(gè)是給input添加readonly屬性,另一個(gè)就是在input事件處理方法前面添加一句document.activeElement.blur() 。

readonly

使用readonly方式來阻止虛擬鍵盤彈出應(yīng)該是最簡單最優(yōu)雅的方式了。readonly 屬性規(guī)定輸入字段為只讀。只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。

值得一提的是它的取值，只要聲明了readonly屬性，不管取什么值都可以，比如readonly=""、readonly="readonly"、readonly="abc"都是一樣的

優(yōu)點(diǎn)：簡單
缺點(diǎn)：在iOS的Safari中無效（未做更多情況測試）

document.activeElement.blur()

這是個(gè)什么玩意兒？document.activeElement是一個(gè)Web API接口。MDN上的解釋是：它返回當(dāng)前頁面中獲得焦點(diǎn)的元素，也就是說，如果此時(shí)用戶按下了鍵盤上某個(gè)鍵，會在該元素上觸發(fā)鍵盤事件，該屬性是只讀的。

document.activeElement屬性始終會引用DOM中當(dāng)前獲得了焦點(diǎn)的元素。元素獲得焦點(diǎn)的方式有用戶輸入(通常是按Tab鍵)、在代碼中調(diào)用focus()方法和頁面加載。

它里面有很多方法，在瀏覽器控制臺查看，可以看到有很都方法：

那么document.activeElement.blur()為什么可以阻止虛擬鍵盤彈出呢？原因是：當(dāng)你點(diǎn)擊input的時(shí)候，document.activeElement獲得了DOM中被聚焦的元素，也就是你點(diǎn)擊的input，而調(diào)用.blur()方法，blur我相信大家都知道吧，就是取消聚焦。獲得被聚焦的元素然后強(qiáng)制blur以達(dá)到?jīng)]有聚焦的樣子、、、感覺繞了。

優(yōu)點(diǎn)：支持Android、iOS
缺點(diǎn)：需要添加額外的JS代碼

這句代碼加在什么地方？加入有如下HTML

<div class="calendar">
    <div>
        <input type="text" id="datePicker" class="date_picker" placeholder="點(diǎn)擊選擇入住日期"/>
    </div>
</div>

那么這句JS加在事件處理方法中

$("#datePicker").focus(function(){
    document.activeElement.blur();
});

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Html5頁面上怎么禁止手機(jī)虛擬鍵盤彈出”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!