国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小技巧|H5禁止手機(jī)虛擬鍵盤彈出

mumumu / 806人閱讀

摘要:使用方式來阻止虛擬鍵盤彈出應(yīng)該是最簡單最優(yōu)雅的方式了。屬性規(guī)定輸入字段為只讀。上的解釋是它返回當(dāng)前頁面中獲得焦點(diǎn)的元素,也就是說,如果此時(shí)用戶按下了鍵盤上某個鍵,會在該元素上觸發(fā)鍵盤事件,該屬性是只讀的。

本文首發(fā)于我的博客:http://dunizb.com
原文地址:http://dunizb.com/2017/09/24/disable-the-phone-virtual-keyboard-up/

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

但是在移動端,input會默認(rèn)觸發(fā)手機(jī)的虛擬鍵盤,如何阻止手機(jī)虛擬鍵盤彈起呢?目前我試過有兩個方案,一個是給input添加readonly屬性,另一個就是在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()

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

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

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

MDN上還展示了一個有意思的示例,看這里

那么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

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

$("#datePicker").focus(function(){
    document.activeElement.blur();
});
總結(jié)

就當(dāng)前需求來說,用document.activeElement.blur()確實(shí)是在繞彎子,直接使用readonly是最佳方案。但是document.activeElement很強(qiáng)大,可以做很多事。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51315.html

相關(guān)文章

  • 技巧|H5禁止手機(jī)虛擬鍵盤彈出

    摘要:使用方式來阻止虛擬鍵盤彈出應(yīng)該是最簡單最優(yōu)雅的方式了。屬性規(guī)定輸入字段為只讀。上的解釋是它返回當(dāng)前頁面中獲得焦點(diǎn)的元素,也就是說,如果此時(shí)用戶按下了鍵盤上某個鍵,會在該元素上觸發(fā)鍵盤事件,該屬性是只讀的。 本文首發(fā)于我的博客:http://dunizb.com原文地址:http://dunizb.com/2017/09/24/disable-the-phone-virtual-keyb...

    shiguibiao 評論0 收藏0
  • H5項(xiàng)目常見問題匯總及解決方案

    摘要:解決方案可以解決在手機(jī)上點(diǎn)擊事件的延遲的模塊,事件也是為了解決在的延遲問題顯示屏原理及設(shè)計(jì)方案說明屏是一種具備超高像素密度的液晶屏,同樣大小的屏幕上顯示的像素點(diǎn)由個變?yōu)槎鄠€,如在同樣帶下的屏幕上,蘋果設(shè)備的顯示屏中,像素點(diǎn)個變?yōu)閭€。 原文鏈接 - https://github.com/FrontEndRo... H5項(xiàng)目常見問題及注意事項(xiàng) Meta基礎(chǔ)知識: H5頁面窗口自動調(diào)整到設(shè)備...

    marser 評論0 收藏0
  • css前端初始化

    摘要:初入前端,若有不足歡迎指正頭部初始化標(biāo)簽問題一般要添加背景音樂的話,我們的第一反應(yīng)就是使用標(biāo)簽,但是這里有一個坑。 前言 當(dāng)下移動端橫行,平常我們做一些移動端的項(xiàng)目,接觸最多的就是H5,雖然做移動端不用兼容IE,但是 我們要兼容微信、app、ios、android... 今天就給寫幾個平常開發(fā)經(jīng)常會遇到的問題以及解決辦法。 初入前端,若有不足 歡迎指正! 頭部初始化 ...

    mikyou 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<