IOS input auto focus 解決方案探究

Imfan 發布于2019-08-22 16:26 / 3449人閱讀

摘要：解決方案探究開發過的人都知道，在手機下面處于安全策略考慮，不允許自動獲取輸入框的焦點并調出虛擬鍵盤，可是從產品角度來看，往往這樣的場景有很多，所以也催生出各種各樣的手段，下面介紹一種自認為是挺完美的方案供大家參考業務場景描述頁面點擊搜索按鈕

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，到這里就結束了方案設計了，希望這個思路可以給大家一個參考。

GPU云服務器云服務器探究關于webrtc直播的探究 focus() focus

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94357.html

Mac聯機調試移動端頁面方法和移動端IOS遇到的兼容性問題

摘要：移動端失效需求點擊一個，讓某一個聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機的表現也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實踐結論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。移動端IOS遇到的兼容性問題和 Mac聯機調試方法有時候遇到一些移動端「疑難雜癥」，因為移動端不方便調試，可能找不到問題點，所以經常需要電腦端和移動端聯機調試，...

CoreDump 2019-08-23 13:46 評論0 收藏0
圖片批量上傳js+html+css

摘要：上傳成功后可以進行業務的下一步操作，自己根據業務寫吧后臺代碼接收前端的文件數據添加圖例開始添加圖例結束該圖例名稱已經存在高級基本自定義添加成功添加失敗再往后和數據庫的交互我就不寫了小菜一枚，不正確之處請批評指正如題，圖片批量上傳，效果如圖所示showImg(https://segmentfault.com/img/remote/1460000019409059); showImg(h...

Heier 2019-08-30 11:06 評論0 收藏0
圖片批量上傳js+html+css

摘要：上傳成功后可以進行業務的下一步操作，自己根據業務寫吧后臺代碼接收前端的文件數據添加圖例開始添加圖例結束該圖例名稱已經存在高級基本自定義添加成功添加失敗再往后和數據庫的交互我就不寫了小菜一枚，不正確之處請批評指正如題，圖片批量上傳，效果如圖所示showImg(https://segmentfault.com/img/remote/1460000019409059); showImg(h...

VEIGHTZ 2019-08-02 15:16 評論0 收藏0