小技巧|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很強大，能夠作不少事。