“前端小記”---- ?-----
****************緊急更新********************
最近收到好多反饋，通過多種機型、系統的測試和了解，發現了一些東西，拿出來和大家分享一下。
據我目前測試得知，如果沒有通過某種用戶交互，手機不會（觸發軟鍵盤彈起）。非用戶交互的當下觸發focus，但設置另一個元素的onClick事件，就能把focus事件帶起來。
意思就是，用戶進入頁面后，必須有一次和用戶的交互，之后才能自動獲取焦點并彈出軟鍵盤。
舉個例子：
比如我現在有input框，想讓它自動獲取焦點，并彈出軟鍵盤，但是不能一進頁面就讓他獲取焦點，這種行不通，因為沒有用戶交互，但是如果說，這個input框開始的時候是隱藏的，我點擊其他地方，讓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機兼容性問題。
如果大家有什么更好的方法，希望可以給我留言，分享給我！
注：以上內容版權所有，作者：K丶Aionro，如有轉載，請注明出處！謝謝！
