JavaScript imitation Alipay password input box_javascript skills

Nowadays, many payment scenarios are done on mobile phones. As the development of H5 pages becomes more and more convenient, many scenarios have also been moved from the client to the browser, and the payment scenario is very natural. is placed in the browser. So you will definitely be familiar with such an input box:

So today I will use JavaScript code to achieve this effect. So first, let me introduce the whole idea. , first we will determine the number of digits to enter the password. My requirement is 5 digits, then use a p tag to wrap 5 input tags.

And set the display: inline-block attribute for these 5 inputs, and use 5d264b06036cf61e3c5c7f9f40741932 to eliminate the direct margin value of the element, then the HTML will look like the following:

<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>

In the code, we need to set the maximum number of input digits, otherwise it will not look like it~ Of course, in order to evoke the numeric keyboard when inputting on the mobile terminal, we also need to set type="tel". Then the next step is the CSS style code. Here I will simply post some code. The specific replica is here~

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(,,,); 
} 
}

Then the next step is the most critical JavaScript part. ,

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll('input'); 
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);

First we monitor the outermost p. When we find that the user selects p, we set the focus of the input to active, and this active is a counter. By default When we enter the correct number, it will be in the first place, which is 0. When we enter the correct number, an active will be added, so that the focus of the input will move backward, thus completing the function of inputting a number and moving it backward one position. , and at the same time we monitor the backspace key on the keyboard. When the user clicks the backspace key, the active is decremented by one, so that the focus of the input box moves forward. Of course, when the input loses focus, we also Remove the listening event bound to it so that it will not cause multiple triggering problems.

In fact, if you sort it out like this, you will find that the whole effect is very simple. You only need to control the movement of a focus, and I think the focus of the entire component is still on the imitation of CSS styles ~ After all There is nothing difficult about the logic of JavaScript ~ Finally, I wish everyone a happy New Year ~ (*^__^*) ~~

The above code briefly introduces the entire description of the JavaScript imitation Alipay password input box. Hope you all like it.