移動端webapp,在進入某頁面后,input框自動獲取焦點並彈出數字鍵盤


在做項目的過程中,需求文檔有個要求是,當進入頁面后,第一個行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機兼容性問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM