JavaScript 모방 Alipay 비밀번호 입력 box_javascript 기술-JS 튜토리얼-php.cn

JavaScript 모방 Alipay 비밀번호 입력 box_javascript 기술

不言

풀어 주다： 2018-05-18 14:56:08

원래의

2689명이 탐색했습니다.

요즘에는 H5 페이지 개발이 점점 편리해지면서 많은 결제 시나리오가 클라이언트에서 브라우저로 옮겨지면서 결제 시나리오가 매우 자연스러워졌습니다. 브라우저. 따라서 여러분은 다음과 같은 입력 상자에 익숙할 것입니다.

오늘은 이 효과를 얻기 위해 JavaScript 코드를 사용하겠습니다. 먼저 전체 내용을 소개하겠습니다. 아이디어. 먼저 비밀번호를 입력할 자릿수를 결정한 다음 p 태그를 사용하여 5개의 입력 태그를 래핑합니다.

이 5개 입력에 대해 display: inline-block 속성을 설정하고 를 사용하여 요소의 직접 여백 값을 제거하면 HTML은 다음과 같습니다. :

<p class="input"> 
<input type="tel" placeholder="随" maxlength=""><!- 
-><input type="tel" placeholder="机" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="数" maxlength=""> 
</p>

로그인 후 복사

코드에서 최대 입력 자릿수를 설정해야 하는데 그렇지 않으면 그렇게 안 보이겠죠~ 물론 모바일 단말기에서 입력할 때 숫자 키보드를 불러일으키려면, 또한 type="tel"을 설정해야 합니다. 다음 단계는 CSS 스타일 코드입니다. 특정 복제본은 여기에 있습니다~

input { 
display: inline-block; 
&:last-child { 
border-right: px solid #; 
} 
input { 
border-top: px solid #; 
border-bottom: px solid #; 
border-left: px solid #; 
width: px; 
height: px; 
outline:none; 
font-family: inherit; 
font-size: px; 
font-weight: inherit; 
text-align: center; 
line-height: px; 
color: #ccc; 
background: rgba(,,,); 
} 
}

로그인 후 복사

그 다음 단계는 가장 중요한 JavaScript 부분입니다.

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll(&#39;input&#39;); 
for (var i = ; i < inputBtn.length; i++) { 
inputBtn[i].addEventListener(&#39;click&#39;, function () { 
inputBtn[active].focus(); 
}, false); 
inputBtn[i].addEventListener(&#39;focus&#39;, function () { 
this.addEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
inputBtn[i].addEventListener(&#39;blur&#39;, function () { 
this.removeEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
} 
/** 
* 监听键盘的敲击事件 
*/ 
function listenKeyUp() { 
var beginBtn = document.querySelector(&#39;#beginBtn&#39;); 
if (!isNaN(this.value) && this.value.length != ) { 
if (active < ) { 
active += ; 
} 
inputBtn[active].focus(); 
} else if (this.value.length == ) { 
if (active > ) { 
active -= ; 
} 
inputBtn[active].focus(); 
} 
if (active >= ) { 
var _value = inputBtn[active].value; 
if (beginBtn.className == &#39;begin-no&#39; && !isNaN(_value) && _value.length != ) { 
beginBtn.className = &#39;begin&#39;; 
beginBtn.addEventListener(&#39;click&#39;, function () { 
calculate.begin(); 
}, false); 
} 
} else { 
if (beginBtn.className == &#39;begin&#39;) { 
beginBtn.className = &#39;begin-no&#39;; 
} 
} 
} 
})(window, document);

로그인 후 복사

먼저 가장 바깥쪽의 p를 모니터링합니다. 사용자가 p를 선택하면 입력의 포커스를 활성으로 설정하고 이 활성은 기본적으로 올바른 숫자를 입력하면 카운터가 됩니다. 첫 번째 자리는 0입니다. 올바른 숫자를 입력하면 활성이 추가되어 입력의 초점이 뒤로 이동하여 숫자를 입력하고 한 위치 뒤로 이동하는 기능이 완료됩니다. 동시에 우리는 키보드의 백스페이스 키를 모니터링합니다. 사용자가 백스페이스 키를 클릭하면 활성 키가 1씩 감소하므로 입력 상자의 포커스가 앞으로 이동합니다. 물론 입력이 포커스를 잃으면 제거도 수행됩니다. 여러 트리거 문제가 발생하지 않도록 청취 이벤트가 바인딩됩니다.

사실 이렇게 정리해보면 전체적인 효과는 여전히 매우 간단하다는 것을 알 수 있는데, 초점의 움직임만 조절하면 된다고 생각합니다. 전체 구성요소는 여전히 CSS 스타일을 모방하고 있습니다~ 결국 JavaScript의 로직은 어려운 것이 없습니다~ 마지막으로 모두들 새해 복 많이 받으세요~ (*^__^*) ~~

위 코드는 JavaScript 모방 Alipay 비밀번호 입력 상자에 대한 전체 설명을 간략하게 소개합니다.