小技巧|H5禁止手機虛擬鍵盤彈出

Dunizb發表於2017-09-24
H5

本文首發於我的部落格：dunizb.com
原文地址：dunizb.com/2017/09/24/…

工作中遇到如下需求，點選輸入框彈出自定義彈窗，輸入框是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()方法和頁面載入。

它裡面有很多方法，在瀏覽器控制檯檢視，可以看到有很都方法：


MDN上還展示了一個有意思的示例，看這裡

那麼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很強大，可以做很多事。

相關文章