今天就來和大家說說有關(guān)于“在前端頁面中如何才可以禁止手機(jī)虛擬鍵盤彈出?”這個(gè)問題,這也是小編在工作中遇到如下需求,希望對大家的學(xué)習(xí)有所幫助!
點(diǎn)擊輸入框彈出自定義彈窗,輸入框是input標(biāo)簽:
但是在移動(dòng)端,input會(huì)默認(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è)鍵,會(huì)在該元素上觸發(fā)鍵盤事件,該屬性是只讀的。
document.activeElement屬性始終會(huì)引用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();
});
總結(jié)
就當(dāng)前需求來說,用document.activeElement.blur()確實(shí)是在繞彎子,直接使用readonly是最佳方案。但是document.activeElement很強(qiáng)大,可以做很多事。
那么到這里我們有關(guān)于:“在前端頁面中如何才可以禁止手機(jī)虛擬鍵盤彈出?”這個(gè)問題的相關(guān)內(nèi)容就分享到這里了,希望大家能有所收獲,更多的學(xué)習(xí)資源我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)!