JS를 기반으로 Alipay와 유사한 결제 비밀번호 입력 상자 구현

이 기사는 Alipay 지불 비밀번호와 유사한 인터페이스를 구현하는데, 이는 숫자 만 입력 할 수 있으며 6 자리 만 입력 할 수 있습니다.

먼저 렌더링을 보여 드리겠습니다. 기분이 좋으면 구현 코드를 참조하십시오.

1. 스타일 시트

 .wrap {margin : 10px auto; width : 329px; 높이 : 640px; 패딩 탑 : 200px;}. 입력 박스 컨테이너 {너비 : 240px; 높이 : 50px; 마진 : 0 Auto; 위치 : 상대적; inputboxContainer. 1px solid; border-radius : 7px; -moz-border-radius : 7px; -webkit-border-radius : 7px; 오버플로 : 숨겨진; 위치 : 절대; z-index : 0;}. inputboxcontainer .realinput {width : 100%; 1; 필터 : Alpha (불투명도 = 0);-Moz-opacity : 0; 불투명도 : 0;}. InputboxContainer .BogusInput Input {Padding : 0; 너비 : 16.3%; 높이 : 100%; 왼쪽; 배경 : #ffffff; 텍스트-알표; 중앙; font-size : 20px; portuber hight : #c3c3 1p). solid;}. inputboxContainer .BogusInput Input : 최후의 자식 {border : none;}. 확인 버튼 {너비 : 240px; 높이 : 45px; border-radius : 7px; -moz-border-radius : 7px; -webkit-Radius : 7px; 배경 : #f4f4; 블록; 글꼴 크기 : 16px; 마진 : 30px 자동; 마진-바닥 : 20px;}. showvalue {너비 : 240px; 높이 : 22px; 선-높이 : 22px; font 사이즈 : 16px; 텍스트-알리그 : 중심; 마진 : 0 Auto;}

2. HTML 코드

 <div> <div id = "inputboxContainer"> <input type = "text"/> <div> <입력 유형 = "암호"maxlength = "6"disabled/<input type = "password"maxlength = "6"disabled/> <입력 유형 = "암호"maxlength = "6"disabled/> <입력 유형 = "암호"maxl 길이 "6"maxl 길이 ". MaxLength = "6"disabled/> <입력 유형 = "암호"maxlength "6"disabled/> <입력 유형 = "암호"maxlength = "6"disabled/<input type = "password"maxlength = "6"disabled/> <입력 유형 = "password"maxlength = "6"disableabled/> <입력 유형 = "암호"maxl 길이 = "6"maxl 길이 ". maxlength = "6"disabled/> <입력 유형 = "비밀번호"maxlength = "6"disabled/> <input type = "password"maxlength = "6"disableabled/</div> </div> <button id = "volietbutton"> vution> <p id = "showvalue"> </p> </p> </div>

3. JS 코드 제어 로직 효과

 (function () {var container = document.getElementById ( "inputboxContainer"); boxInput = {maxLength : "", realInput : ", bogusInput :" ", bogusinputarr :", 콜백 : ", init : function (fun) {var that = this; this.callback = fun. 컨테이너. that.realinput.onpropertychange = function () {that.setValue ();}}, setValue : function () {this.realInput.value = this.realInput.value.replace (// d/g, "); console.log (this.realinput.value.replace (// d/g,")) 이. real_str.substring (0,6); this.callback ();}}, getBoxInputValue : function () {var realValue = "; RealValue;}}}} () boxInput.init (function () {getValue ();}); document.getElementById ( "quicatebutton"). onclick = function () {getValue ();} 함수 getValue () {getelementById ( "showValue");

위는 편집자가 소개 한 JS를 기반으로 한 Alipay 지불 비밀번호 입력 상자입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!