成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

IOS input auto focus 解決方案探究

Imfan / 3459人閱讀

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

IOS input auto focus 解決方案探究

開發(fā)過hybird的人都知道,在IOS手機(jī)下面處于安全策略考慮,不允許JS自動獲取input輸入框的焦點(diǎn)并調(diào)出虛擬鍵盤,可是從產(chǎn)品角度來看,往往這樣的場景有很多,所以也催生出各種各樣的hack手段,下面介紹一種自認(rèn)為是挺完美的方案供大家參考:

業(yè)務(wù)場景描述:

A頁面點(diǎn)擊搜索按鈕,跳到B頁面,B頁面的搜索框自動獲取焦點(diǎn)并且彈出虛擬鍵盤。

方案設(shè)計:

基于vue(其他框架類似)設(shè)計如下:

A、B頁面都是不同的路由頁面;

在A、B頁面公共部分添加一個公共input隱藏輸入框并設(shè)置唯一id;

將A頁面的搜索按鈕包一層label節(jié)點(diǎn),并設(shè)置for屬性指向公共input的id,并設(shè)置click事件跳轉(zhuǎn)到B頁面;

在B頁面的beforeMount中添加監(jiān)聽公共input的input事件,并在監(jiān)聽的回調(diào)函數(shù)里面去賦值給B頁面真正用于顯示的input框;

這樣就結(jié)束了,當(dāng)我們點(diǎn)擊A頁面的搜索按鈕會觸發(fā)label for特性顯示虛擬彈窗,并跳轉(zhuǎn)到B頁面,然后直接按虛擬按鍵即可完成公共隱藏輸入框和真正輸入框之間的值的同步賦值;

優(yōu)點(diǎn):

以最少的代碼完成hack

以最少的改動完成hack

缺點(diǎn):

唯一的缺點(diǎn)是不能讓B頁面的輸入框一開始的時候有一個光標(biāo),這個建議可以寫一個通用的input組件,通過CSS hack方式模擬光標(biāo)顯示

結(jié)論:

OK,到這里就結(jié)束了方案設(shè)計了,希望這個思路可以給大家一個參考。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/94357.html

相關(guān)文章

  • Mac聯(lián)機(jī)調(diào)試移動端頁面方法 和 移動端IOS遇到的兼容性問題

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

    CoreDump 評論0 收藏0
  • 圖片批量上傳js+html+css

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

    Heier 評論0 收藏0
  • 圖片批量上傳js+html+css

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

    VEIGHTZ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<