“前端小記”---- ?-----

****************緊急更新********************

最近收到好多反饋，通過多種機(jī)型、系統(tǒng)的測試和了解，發(fā)現(xiàn)了一些東西，拿出來和大家分享一下。

據(jù)我目前測試得知，如果沒有通過某種用戶交互，手機(jī)不會(huì)（觸發(fā)軟鍵盤彈起）。非用戶交互的當(dāng)下觸發(fā)focus，但設(shè)置另一個(gè)元素的onClick事件，就能把focus事件帶起來。

意思就是，用戶進(jìn)入頁面后，必須有一次和用戶的交互，之后才能自動(dòng)獲取焦點(diǎn)并彈出軟鍵盤。

舉個(gè)例子：

比如我現(xiàn)在有input框，想讓它自動(dòng)獲取焦點(diǎn)，并彈出軟鍵盤，但是不能一進(jìn)頁面就讓他獲取焦點(diǎn)，這種行不通，因?yàn)闆]有用戶交互，但是如果說，這個(gè)input框開始的時(shí)候是隱藏的，我點(diǎn)擊其他地方，讓input框顯示，并且使其獲取焦點(diǎn)，彈出軟鍵盤，這個(gè)方式就是可行的，因?yàn)橹虚g存在一次用戶交互。

實(shí)在抱歉，之前誤導(dǎo)了很多同學(xué)，在此對(duì)大家伙說一聲抱歉。

下面的解決方案在我們項(xiàng)目里可以用，也是因?yàn)樯厦娴脑颉?/p>

? ? ? 在做項(xiàng)目的過程中，需求文檔有個(gè)要求是，當(dāng)進(jìn)入頁面后，第一個(gè)行input框要自動(dòng)獲取焦點(diǎn)，并彈出數(shù)字軟鍵盤。

? ? ? ? ? ?個(gè)人認(rèn)為這個(gè)問題，大家做移動(dòng)端的時(shí)候應(yīng)該會(huì)遇到，今天拿出來說說我們遇到的這個(gè)小bug。

一個(gè)相對(duì)很簡單的需求，但是值得記錄一下，因?yàn)樵诖宋覀冞€是遇到了一些hack的。

先說一下上面的這個(gè)問題的基礎(chǔ)解決方案：

? ? ? ? ?autofocus 屬性 ? : ? 文本輸入字段被設(shè)置為當(dāng)頁面加載時(shí)獲得焦點(diǎn)

? ? ? ? ?<input type="tel" autofocus="autofocus"> ?這一行代碼其實(shí)就夠了！

但是問題來了、、

問題點(diǎn)：

? ? ? ?android系統(tǒng)下

? ? ? ? ?QQ、uc瀏覽器，input輸入框中需要頁面進(jìn)入即自動(dòng)彈出數(shù)字軟鍵盤，利用input標(biāo)簽屬性autofocus=”autofocus”，經(jīng)真機(jī)測試，依然無法彈出軟鍵盤。

解決方案：

? ? ? ? ?1、利用要獲得焦點(diǎn)的input框添加一個(gè)focus()，此方法在chrome瀏覽器下無任何問題，但是在QQ、uc瀏覽器下雖然獲取了焦點(diǎn)，但是無法彈出數(shù)字軟鍵盤。

? ? ? ? ?2、利用setTimeOut()開一個(gè)定時(shí)器的方法，但是，android手機(jī)參差不齊，性能問題嚴(yán)重，不可控以及容錯(cuò)率太低，所以此方法比較不靠譜，不建議使用。

? ? ? ? ?3、利用trigge()方法，對(duì)要獲得焦點(diǎn)的input框，調(diào)用一次”click”事件，既可解決上述問題。

? ? ? ? ? ? ? xxxxxxxx.el.find('#c_payment_cardbin_input').trigger("click").focus()；

以上就是我們此次項(xiàng)目的解決方案，網(wǎng)上查了一些，但是也沒找到更好的方法，個(gè)人感覺還是自己寫的這個(gè)比較靠譜一些，不過上述方法能實(shí)現(xiàn)我們的項(xiàng)目需求，而且也能很好的解決萬惡的Android機(jī)兼容性問題。

如果大家有什么更好的方法，希望可以給我留言，分享給我！

注：以上內(nèi)容版權(quán)所有，作者：K丶Aionro，如有轉(zhuǎn)載，請(qǐng)注明出處！謝謝！