前端常見相容問題系列8: 安卓機器中通過JS設定焦點無法拉起軟鍵盤

有時候，為了優化使用者體驗，做互動設計的同學可能會希望讓輸入框自動獲得焦點并彈出軟鍵盤，這樣使用者不用點選輸入框就可以直接輸入。的确，這對使用者來說很友善。但真正用html5頁面去實作的時候，卻遇到了問題。

首先我做了這樣一個demo。

在ios的機器上試驗，可以實作需求。但在多台安卓機器上測試時，都發現無法拉起來軟鍵盤。

接着我嘗試了給input輸入框加上autofocus屬性、或者給 <code>document.getelementbyid('input1').focus();</code>加上延時執行，也都無效。

之後，我又嘗試把<code>&lt;input id="input1" type="text"&gt;</code>換成一個<code>&lt;div contenteditable="true" id="input1"&gt;&lt;/div&gt;</code>，再用js控制它自動獲得焦點，事實證明也是無效的。

最後找到一個可以部分解決問題的辦法，就是通過一個按鈕的<code>click()</code>方法去觸發input框的<code>focus()</code>方法。代碼清單如下所示：

這個辦法可以解決在點選一個按鈕，不跳轉頁面的情況下打開一個彈層，讓彈層中的輸入框自動獲得焦點并拉起軟鍵盤的問題。注意，這裡的點選按鈕事件是需要手動觸發的。如果不手動點選按鈕，則即便用js去觸發按鈕點選事件，也是不能拉起軟鍵盤的。至于點選按鈕後跳轉到一個新頁面的場景，用這種辦法也是無法cover到的。

最後，順便提一下，有一個方法可以在進入頁面時就通過js拉起軟鍵盤，那就是進入頁面時自動執行<code>window.propmt()</code>這個js語句。遺憾的是，由于<code>window.propmt()</code>彈出的界面不可定制，實在太不美觀，因而使用場景非常之有限。