国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

移動web如何實現類似客戶端多方框輸入密碼功能

來源:懂視網 責編:小采 時間:2020-11-27 16:41:38
文檔

移動web如何實現類似客戶端多方框輸入密碼功能

移動web如何實現類似客戶端多方框輸入密碼功能:不知道怎么描述標題,先看截圖吧,大致的效果就是一個框輸入一位密碼。 最開始實現的思路是一個小方框就是一個type為password的input,每輸入一位自動跳到下一位,刪除一位就自動跳到前一位,android上是OK的,很平滑也沒有bug,但是ios上會出現鍵盤頻繁
推薦度:
導讀移動web如何實現類似客戶端多方框輸入密碼功能:不知道怎么描述標題,先看截圖吧,大致的效果就是一個框輸入一位密碼。 最開始實現的思路是一個小方框就是一個type為password的input,每輸入一位自動跳到下一位,刪除一位就自動跳到前一位,android上是OK的,很平滑也沒有bug,但是ios上會出現鍵盤頻繁
不知道怎么描述標題,先看截圖吧,大致的效果就是一個框輸入一位密碼。

移動web如何實現類似客戶端多方框輸入密碼功能

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

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

既然多個是頻繁focus和blur導致的問題,又必須是密碼框,那何不就用一個input框來輸入呢,小方框就用別的方式模擬,開干。這是最后的效果:http://jsbin.com/neqesiqogu/edit?html,css,js,output

下面是實現的樣式:

css 代碼

.pwd-box{ 
width:310px; 
padding-left: 1px; 
position: relative; 
border: 1px solid #9f9fa0; 
border-radius: 3px; 
} 
.pwd-box input[type="tel"]{ 
width: 99%; 
height: 45px; 
color: transparent; 
position: absolute; 
top: 0; 
left: 0; 
border: none; 
font-size: 18px; 
opacity: 0; 
z-index: 1; 
letter-spacing: 35px; 
} 
.fake-box input{ 
width: 44px; 
height: 48px; 
border: none; 
border-right: 1px solid #e5e5e5; 
text-align: center; 
font-size: 30px; 
} 
.fake-box input:nth-last-child(1){ 
border:none; 
} 
.pwd-box .pwd-input:focus{//密碼框聚焦的時候需要改變其位置,否則IOS上會有閃動的光標~ 
left:-1000px; 
top: -100px; 
} 

js 代碼

var $input = $(".fake-box input"); 
 $("#pwd-input").on("input", function() { 
 var pwd = $(this).val().trim(); 
 for (var i = 0, len = pwd.length; i < len; i++) { 
 $input.eq("" + i + "").val(pwd[i]); 
 } 
 $input.each(function() { 
 var index = $(this).index(); 
 if (index >= len) { 
 $(this).val(""); 
 } 
 }); 
 if (len == 6) { 
 self.sendPackage(pwd);//發送密碼 
 } 
 }); 

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

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

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

移動web如何實現類似客戶端多方框輸入密碼功能

移動web如何實現類似客戶端多方框輸入密碼功能:不知道怎么描述標題,先看截圖吧,大致的效果就是一個框輸入一位密碼。 最開始實現的思路是一個小方框就是一個type為password的input,每輸入一位自動跳到下一位,刪除一位就自動跳到前一位,android上是OK的,很平滑也沒有bug,但是ios上會出現鍵盤頻繁
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产精品免费在线播放 | 国产精品第十页 | 国产一区二区三区精品视频 | 欧美一区二区三区视视频 | 欧美a在线视频 | 婷婷久久五月天 | 欧洲精品一区二区三区 | 91欧美在线| 亚洲综合欧美日韩 | 亚洲国产精品婷婷久久 | 成人精品视频在线观看播放 | 欧美在线综合 | 久久国产亚洲欧美日韩精品 | 欧美日韩精品一区二区三区视频在线 | 久久91精品久久91综合 | 国产美女一级特黄毛片 | 欧美日韩国产在线成人网 | 99久久国产综合精品成人影院 | 99精品国产免费久久国语 | 欧美高清日韩 | 一区二区三区在线免费视频 | 亚洲综合欧美日韩 | 一级一级一级毛片免费毛片 | 国产精品视频久久久久 | 精品一区 二区三区免费毛片 | 精品91精品91精品国产片 | 一本久久道 | 国产高清一区二区三区 | 国产成人不卡亚洲精品91 | 成人欧美一区二区三区黑人 | 国产在线精品99一卡2卡 | 国产欧美又粗又猛又爽老 | 国产一级精品视频 | 97成人资源| 欧美日韩免费看 | 综合亚洲一区二区三区 | 成人美女黄网站色大色费 | 亚洲精品国产精品乱码不97 | 国产综合成人久久大片91 | 国产欧美另类久久精品91 | 国产亚洲一区二区三区不卡 |