移動web模擬客戶端實現多方框輸入密碼效果

2022-02-28 15:36:43 字數 1075 閱讀 7408

不知道怎麼描述標題,先看截圖吧,大致的效果就是乙個框輸入一位密碼。

最開始實現的思路是乙個小方框就是乙個type為password的input,每輸入一位自動跳到下一位,刪除一位就自動跳到前一位,android上是ok的,很平滑也沒有bug,但是ios上會出現鍵盤頻繁調起和關閉,非常影響使用者體驗。原因估計是每個input會不斷的focus和blur,每次focus會調起鍵盤,blur又會關閉鍵盤,so....此方案肯定不行了。

pm非要實現這種效果,木有辦法~拗不過,一句使用者體驗不好會讓你沒話說,誰要咱是前端呢~拗不過就找解決方案吧。

既然多個是頻繁focus和blur導致的問題,又必須是密碼框,那何不就用乙個input框來輸入呢,小方框就用別的方式模擬,開幹。這是最後的效果:

下面是實現的樣式:

.pwd-box

.pwd-box input[type="tel"]

.fake-box input

.fake-box input:nth-last-child(1)

.pwd-box .pwd-input:focus

var $input = $(".fake-box input");

$("#pwd-input").on("input", function

() $input.each(

function

() });

if (len == 6)

});

大致的思路就是動態監聽真實密碼框的輸入修改小方框內密碼框的內容。

其實效果實現不難,關鍵是思路還有解決該死的相容,完成該效果的時候ios會有閃動的游標,android沒有,然後找一系列方法去隱藏游標,比如focus時候設定text-indent,color設定transparent等等,但都無濟於事,後來發現**有個辦法是focus時候把密碼框丟到一邊去,因為外層有overflow hidden,完美解決了問題~

移動客戶端網路優化

乙個網路請求可以簡單分為連線伺服器 獲取資料兩個部分。其中連線伺服器前還包括 dns 解析的過程 獲取資料後可能會對資料進行快取。一 連線伺服器優化策略 1.不用網域名稱,用 ip 直連 省去 dns 解析過程,dns 全名 domain name system,解析意指根據網域名稱得到其對應的 i...

使用tcp select實現客戶端與客戶端的通訊

使用多路復用實現客戶端與客戶端進行通訊 原理 客戶端只要一連上伺服器,立馬給伺服器傳送使用者名稱,然後在服務端將newsocketfd 存放在同乙個結構體中,客戶端先給伺服器傳送資料,然後通過伺服器 給客戶端。伺服器先會查詢對應名字的 newsocketfd 然後向該 newsocketfd 中寫入...

XMLHTTP開發Web 客戶端

關鍵字 xmlhttp,xml,web客戶端,c asp 所有的知識都不是最新的知識點,關鍵是達到自己的設計目的。某些時候,我們可能需要客戶端做點什麼以簡化複雜的指令碼處理,比如加密之類的等。不管用什麼樣的客戶端,首先我們應該確定我們遵守的協議,或者說如何設定或獲取我的資料。這裡,我們的伺服器端為i...