在做項目的過程中,需求文檔有個要求是,當進入頁面后,第一個行input框要自動獲取焦點,並彈出數字軟鍵盤。
個人認為這個問題,大家做移動端的時候應該會遇到,今天拿出來說說我們遇到的這個小bug。
一個相對很簡單的需求,但是值得記錄一下,因為在此我們還是遇到了一些hack的。
先說一下上面的這個問題的基礎解決方案:
autofocus 屬性 : 文本輸入字段被設置為當頁面加載時獲得焦點
<input type="tel" autofocus="autofocus"> 這一行代碼其實就夠了!
但是問題來了、、
問題點:
android系統下
QQ、uc瀏覽器,input輸入框中需要頁面進入即自動彈出數字軟鍵盤,利用input標簽屬性autofocus=”autofocus”,經真機測試,依然無法彈出軟鍵盤。
解決方案:
1、利用要獲得焦點的input框添加一個focus(),此方法在chrome瀏覽器下無任何問題,但是在QQ、uc瀏覽器下雖然獲取了焦點,但是無法彈出數字軟鍵盤。
2、利用setTimeOut()開一個定時器的方法,但是,android手機參差不齊,性能問題嚴重,不可控以及容錯率太低,所以此方法比較不靠譜,不建議使用。
3、利用trigge()方法,對要獲得焦點的input框,調用一次”click”事件,既可解決上述問題。
xxxxxxxx.el.find('#c_payment_cardbin_input').trigger("click").focus();
以上就是我們此次項目的解決方案,網上查了一些,但是也沒找到更好的方法,個人感覺還是自己寫的這個比較靠譜一些,不過上述方法能實現我們的項目需求,而且也能很好的解決萬惡的Android機兼容性問題。