JavaScript-Nachahmung, Alipay-Passworteingabebox_Javascript-Kenntnisse-js-Tutorial-php.cn

JavaScript-Nachahmung, Alipay-Passworteingabebox_Javascript-Kenntnisse

不言

Freigeben： 2018-05-18 14:56:08

Original

2689 Leute haben es durchsucht

Heutzutage werden viele Zahlungsszenarien auf Mobiltelefonen durchgeführt, und da die Entwicklung von H5-Seiten immer komfortabler wird, wurden viele Szenarien auch vom Client auf den Browser verlagert, und das Zahlungsszenario ist sehr natürlich Der Browser. Sie werden also sicherlich mit einem solchen Eingabefeld vertraut sein:

Daher werde ich heute JavaScript-Code verwenden, um diesen Effekt zu erzielen. Lassen Sie mich also zunächst das Ganze vorstellen Idee: Zuerst bestimmen wir die Anzahl der Ziffern für die Eingabe des Passworts und verwenden dann ein p-Tag, um 5 Eingabe-Tags zu umschließen.

Und legen Sie das display: inline-block-Attribut für diese 5 Eingaben fest und verwenden Sie , um den direkten Randwert des Elements zu entfernen. Dann sieht der HTML-Code wie folgt aus :

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

Nach dem Login kopieren

Im Code müssen wir die maximale Anzahl der Eingabeziffern festlegen, sonst sieht es nicht so aus~ Um bei der Eingabe auf dem mobilen Endgerät natürlich die numerische Tastatur aufzurufen, Wir müssen auch type="tel" festlegen. Dann ist der nächste Schritt der Code im CSS-Stil. Hier werde ich einfach einen Code posten >

Zuerst überwachen wir das äußerste p. Wenn wir feststellen, dass der Benutzer p auswählt, setzen wir den Fokus der Eingabe auf aktiv, und dieser aktive Wert ist standardmäßig ein Zähler, wenn wir die richtige Zahl eingeben die erste Stelle, die 0 ist. Wenn wir die richtige Zahl eingeben, wird ein aktiver Wert hinzugefügt, sodass der Fokus der Eingabe nach hinten verschoben wird, wodurch die Funktion der Eingabe einer Zahl und deren Verschiebung um eine Position abgeschlossen wird Gleichzeitig überwachen wir die Rücktaste auf der Tastatur. Wenn der Benutzer auf die Rücktaste klickt, wird die aktive Taste um eins verringert, sodass der Fokus des Eingabefelds natürlich auch nach vorne verschoben wird Entfernen das daran gebundene Listening-Ereignis, sodass es nicht zu mehreren Triggerproblemen führt.

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

Nach dem Login kopieren

Tatsächlich werden Sie, wenn Sie es so klären, feststellen, dass der gesamte Effekt immer noch sehr einfach ist. Sie müssen nur die Bewegung eines Fokus steuern, und ich denke, der Fokus des Die gesamte Komponente basiert immer noch auf der Nachahmung von CSS-Stilen ~ Schließlich gibt es an der Logik von JavaScript nichts Schwieriges ~ Abschließend wünsche ich allen ein frohes neues Jahr ~ (*^__^*) ~~

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

Nach dem Login kopieren

Der obige Code stellt kurz die gesamte Beschreibung des Alipay-Passwort-Eingabefelds für JavaScript-Imitationen vor.