IOS input auto focus 解決方案探究

IOS input auto focus 解決方案探究

開發過hybird的人都知道，在IOS手機下面處於安全策略考慮，不容許JS自動獲取input輸入框的焦點並調出虛擬鍵盤，但是從產品角度來看，每每這樣的場景有不少，因此也催生出各類各樣的hack手段，下面介紹一種自認爲是挺完美的方案供你們參考：

業務場景描述：

• A頁面點擊搜索按鈕，跳到B頁面，B頁面的搜索框自動獲取焦點而且彈出虛擬鍵盤。

方案設計：

基於vue（其餘框架相似）設計以下：

1. A、B頁面都是不一樣的路由頁面；
2. 在A、B頁面公共部分添加一個公共input隱藏輸入框並設置惟一id；
3. 將A頁面的搜索按鈕包一層label節點，並設置for屬性指向公共input的id，並設置click事件跳轉到B頁面；
4. 在B頁面的beforeMount中添加監聽公共input的input事件，並在監聽的回調函數裏面去賦值給B頁面真正用於顯示的input框；
5. 這樣就結束了，當咱們點擊A頁面的搜索按鈕會觸發label for特性顯示虛擬彈窗，並跳轉到B頁面，而後直接按虛擬按鍵便可完成公共隱藏輸入框和真正輸入框之間的值的同步賦值；

優勢：

1. 以最少的代碼完成hack
2. 以最少的改動完成hack

缺點：

1. 惟一的缺點是不能讓B頁面的輸入框一開始的時候有一個光標，這個建議能夠寫一個通用的input組件，經過CSS hack方式模擬光標顯示

結論：

OK，到這裏就結束了方案設計了，但願這個思路能夠給你們一個參考。