行動web模擬客戶端實現多方框輸入密碼效果【附代碼】_html5教學技巧

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

最開始實現的思路是一個小方框就是一個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

以下是實現的樣式：

JavaScript Code複製內容到剪貼簿

1. .pwd-box{   
2. width:310px;   
3. padding-left: 1px;   
4. position: relative;   
5. border: 1px solid #9f9fa0;   
6. border-radius: 3px;   
7. }   
8. .pwd-box input[type="tel"]{   
9. width: 99%;   
10. height: 45px;   
11. color: transparent;   
12. position: absolute;   
13. top: 0;   
14. left: 0;   
15. border: none;   
16. font-size: 18px;   
17. opacity: 0;   
18. z-index: 1;   
19. letter-spacing: 35px;   
20. }   
21. .fake-box input{   
22. width: 44px;   
23. height: 48px;   
24. border: none;   
25. border-right: 1px solid #e5e5e5;   
26. text-align: center;   
27. font-size: 30px;   
28. }   
29. .fake-box input:nth-last-child(1){   
30. border:none;   
31. }   
32. .pwd-box .pwd-input:focus{//密碼框聚焦的時候需要改變其位置，否則IOS上會有閃爍的遊標~   
33. left:-1000px;   
34. top: -100px;   
35. }  

JavaScript Code複製內容到剪貼簿

1. var $input = $(".fake-box input");   
2. $("#pwd-input").on("input",関数() {
3. var pwd = $(this).val().trim();   
4. for (var i = 0, len = pwd.length; i < len; i ) {
5. $input.eq("" i "").val(pwd[i]);   
6. }
7. $input.each(function() {
8. var index = $(this).index();   
9. if (index >= len) {
10. $(this).val("");   
11. }
12. });   
13. if (len == 6) {
14. self.sendPackage(pwd);// 送信密码
15. }
16. });  

の主な考え方は、真の暗号フレームの入力によって、暗号フレーム内のコンテンツが変更されることです。

その効果は実現せず、問題は思考回路であり、この死の互換性を備えており、その効果を達成するときにIOSに起動された光マークがあり、Androidが存在せず、その後、一連の方法で光マークを取り除き、フォーカス時の設定テキストと比較します-インデント、カラー配置透明等等，但都無济事，後播放淘宝有一办法是フォーカス時候ハ密コード框丢到一边去，因外层有オーバーフロー非表示，完美解决了问题~

以上のバージョンの移動 Web モジュール クライアントは、多方框入力秘密コード効果を実現します。 >

翻訳地址：

http://www.cnblogs.com/hutuzhu/p/5000024.html