国产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
主站蜘蛛池模板: 在线观看国产欧美 | 91导航在线观看 | 久久久久久久国产精品 | 全黄a一级毛片 | 99久久免费国产精精品 | 伊人精品国产 | 久久久久久91香蕉国产 | 国产日产高清欧美一区二区三区 | 欧美成人精品一级高清片 | 国产91精品久久久久久久 | 亚洲另类欧美日韩 | 欧美在线不卡 | 精品偷自拍另类在线观看 | 欧美综合亚洲图片综合区 | 欧美日韩国产色 | 国产综合社区 | 欧美精品v日韩精品v国产精品 | 国产视频中文字幕 | 精品久久久久久久中文字幕 | 99久久免费国产精精品 | 国内精品视频免费观看 | 五月婷婷在线视频 | 久久成人国产精品免费 | 国产一区二区成人 | 国产日韩欧美在线播放 | 欧美一级高清片欧美国产欧美 | 国产视频高清 | 久久频道毛片免费不卡片 | 亚洲午夜精品 | 亚洲国产精品日韩一线满 | 水蜜桃网站 | 欧美日在线观看 | 亚洲午夜久久久精品影院 | 伊人久久精品一区二区三区 | 伊人久久精品久久亚洲一区 | 一区二区三区观看 | 亚洲欧美日韩精品久久久 | 日韩精品一区二区三区在线观看l | 国产区二区 | 亚洲欧美韩日 | 久久精品一区二区三区四区 |