모바일 웹 시뮬레이션 클라이언트는 여러 상자에 비밀번호를 입력하는 효과를 구현합니다. [코드 포함]_html5 튜토리얼 기술

제목을 어떻게 설명해야 할지 모르겠습니다. 먼저 스크린샷을 살펴보겠습니다. 일반적인 효과는 상자에 비밀번호를 입력하는 것입니다.

초기 구현 아이디어는 작은 상자에 숫자를 입력할 때마다 자동으로 다음 숫자로 건너뛰는 것입니다. Android에서는 매우 원활하고 버그가 없지만 iOS에서는 키보드가 자주 열리고 닫히므로 사용자 경험에 큰 영향을 미칩니다. 그 이유는 아마도 각 입력이 지속적으로 초점을 맞추고 흐려지기 때문일 것입니다. 매번 초점이 키보드를 불러오고 흐림으로 인해 키보드가 닫히기 때문입니다. 따라서... 이 솔루션은 작동하지 않습니다.

PM이 이 효과를 고집한다면 방법이 없습니다~ 하지만 어쩔 수 없다면 나쁜 사용자 경험으로 인해 말문이 막힐 것입니다. 우리가 프런트엔드가 되기를 바라는 사람이 있을까요~ 어쩔 수 없다면요. 그냥 해결책을 찾으세요.

잦은 초점과 흐림으로 인해 많은 문제가 발생하고 암호 상자여야 하므로 입력 상자를 사용하여 입력하고 다른 방법을 사용하여 작은 상자를 시뮬레이션하고 시작해 보겠습니다. 최종 효과는 다음과 같습니다. http://jsbin.com/neqesiqogu/edit?html,css,js,output

구현된 스타일은 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. .pwd-box{
2. 폭:310px
3. 왼쪽 여백: 1px
4. 위치: 친척
5. 테두리: 1px 솔리드 #9f9fa0
6. 테두리 반경: 3px
7. }
8. .pwd-box 입력[type="tel"]{
9. 너비: 99%
10. 높이: 45px
11. 색상: 투명
12. 위치: 절대
13. 상단: 0
14. 왼쪽: 0
15. 경계: 없음
16. 글꼴 크기: 18px
17. 불투명도: 0
18. z-색인: 1
19. 글자 간격: 35px
20. }
21. .fake-box 입력{
22. 너비: 44px
23. 높이: 48px
24. 경계: 없음
25. 테두리 오른쪽: 1px 솔리드 #e5e5e5
26. 텍스트 정렬: 가운데
27. 글꼴 크기: 30px
28. }
29. .fake-box 입력:nth-last-child(1){
30. 경계:없음
31. }
32. .pwd-box .pwd-input:focus{//비밀번호 상자에 포커스가 있을 때 위치를 변경해야 합니다. 그렇지 않으면 IOS에서 커서가 깜박입니다~
33. 왼쪽:-1000px
34. 상단: -100px
35. }

JavaScript 코드클립보드에 콘텐츠 복사

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

大致的思路就是动态监听真实密码框的输入修改容内容.

其实效果实现不难, 关键是思路还有解决该死的兼容, 完成该效果的时候IOS会有闪动的光标, android没有, 然后找一系列方法去隐藏光标，比如focus时候设置text- 들여쓰기,색상设置transparent等等，但city济于事，后来发现淘宝有个办法是focus时候把密码框丢到一边去，因为外层有overflow Hidden，完美解决了问题~

以上这篇移动web模拟客户端实现多 方框输入密码效果一个参考，也希望大家多多支持脚本之家。

원문지址：http://www.cnblogs.com/hutuzhu/p/5000024.html