IOS input auto focus 解決方案探究
開發過hybird的人都知道,在IOS手機下面處於安全策略考慮,不允許JS自動獲取input輸入框的焦點並調出虛擬鍵盤,可是從產品角度來看,往往這樣的場景有很多,所以也催生出各種各樣的hack手段,下面介紹一種自認為是挺完美的方案供大家參考:
業務場景描述:
- A頁面點選搜尋按鈕,跳到B頁面,B頁面的搜尋框自動獲取焦點並且彈出虛擬鍵盤。
方案設計:
基於vue(其他框架類似)設計如下:
- A、B頁面都是不同的路由頁面;
- 在A、B頁面公共部分新增一個公共input隱藏輸入框並設定唯一id;
- 將A頁面的搜尋按鈕包一層label節點,並設定for屬性指向公共input的id,並設定click事件跳轉到B頁面;
- 在B頁面的beforeMount中新增監聽公共input的input事件,並在監聽的回撥函式裡面去賦值給B頁面真正用於顯示的input框;
- 這樣就結束了,當我們點選A頁面的搜尋按鈕會觸發label for特性顯示虛擬彈窗,並跳轉到B頁面,然後直接按虛擬按鍵即可完成公共隱藏輸入框和真正輸入框之間的值的同步賦值;
優點:
- 以最少的程式碼完成hack
- 以最少的改動完成hack
缺點:
- 唯一的缺點是不能讓B頁面的輸入框一開始的時候有一個游標,這個建議可以寫一個通用的input元件,通過CSS hack方式模擬游標顯示
結論:
OK,到這裡就結束了方案設計了,希望這個思路可以給大家一個參考。