JavaScript imitation Alipay saisie du mot de passe box_javascript compétences

De nos jours, de nombreux scénarios de paiement sont réalisés sur les téléphones mobiles. À mesure que le développement des pages H5 devient de plus en plus pratique, de nombreux scénarios ont également été déplacés du client vers le navigateur, et le scénario de paiement est placé de manière très naturelle. le navigateur. Vous serez donc certainement familier avec une telle zone de saisie :

Alors aujourd'hui, je vais utiliser du code JavaScript pour obtenir cet effet. Alors, laissez-moi d'abord vous présenter l'ensemble. idée., nous allons d’abord déterminer le nombre de chiffres pour saisir le mot de passe. Mon exigence est de 5 chiffres, puis utiliser une balise p pour envelopper 5 balises d’entrée.

Et définissez l'attribut display: inline-block pour ces 5 entrées, et utilisez 5d264b06036cf61e3c5c7f9f40741932 pour éliminer la valeur de marge directe de l'élément, le HTML ressemblera alors à ce qui suit :

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

Dans le code, il faut fixer le nombre maximum de chiffres de saisie, sinon ça ne ressemblera pas à ça~ Bien sûr, afin d'évoquer le clavier numérique lors de la saisie sur le terminal mobile, nous devons également définir type="tel". Ensuite, la prochaine étape est le code de style CSS. Ici, je publierai simplement du code. La réplique spécifique est ici~

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

Ensuite, la prochaine étape est la partie JavaScript la plus critique,

/** 
* 模拟支付宝的密码输入形式 
*/ 
(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);

Nous surveillons d'abord le p le plus externe. Lorsque nous constatons que l'utilisateur sélectionne p, nous définissons le focus de l'entrée sur actif, et cet actif est un compteur par défaut. Lorsque nous entrons le nombre correct, il sera dans. la première place, qui est 0. Lorsque nous entrons le nombre correct, un actif sera ajouté, de sorte que le focus de la saisie se déplacera vers l'arrière, complétant ainsi la fonction de saisie d'un nombre et de le déplacer vers l'arrière d'une position, et à. en même temps, nous surveillons la touche retour arrière du clavier. Lorsque l'utilisateur clique sur la touche retour arrière, l'actif est décrémenté de un, de sorte que le focus de la zone de saisie avance. Bien sûr, lorsque la saisie perd le focus, nous supprimons également. l'événement d'écoute qui y est lié afin qu'il ne provoque pas de multiples problèmes de déclenchement.

En fait, si vous faites le tri comme ceci, vous constaterez que l'ensemble de l'effet est toujours très simple. Il vous suffit de contrôler le mouvement d'un focus, et je pense que le focus du focus. tout le composant est toujours sur l'imitation des styles CSS ~ Après tout Il n'y a rien de difficile dans la logique de JavaScript ~ Enfin, je souhaite à tous une bonne année ~ (*^__^*) ~~

Le code ci-dessus présente brièvement la description complète de la zone de saisie du mot de passe Alipay imitation JavaScript. J'espère que vous l'aimerez tous.