Les anciennes règles ~ Lorsque vous allez à la démo, vous vous amuserez d'abord: un périphérique d'entrée de mot de passe à six chiffres
Ensuite, ajoutez le code source: le mot de passe du caractère de caractère à six chiffres
À partir de la démo, je peux voir que d'abord, seuls six caractères peuvent être entrés et seuls les numéros peuvent être entrés. Une fois l'entrée de six chiffres terminée, un rappel sera automatiquement exécuté (le résultat d'entrée s'affiche dans la démo)
1. Parlons d'abord du principe
Tout d'abord, nous avons besoin de deux choses: l'une est une véritable boîte d'entrée, c'est-à-dire qu'elle est vraiment en foyer et obtient l'entrée d'entrée d'entrée de l'utilisateur; L'autre est un ensemble de boîtes de saisie pseudo, c'est-à-dire qu'elle n'obtient pas vraiment l'attention, mais elle affiche uniquement la valeur actuellement saisie (bien sûr, le mot de passe n'est qu'un petit point noir ~).
Deuxièmement, nous devons être simples et ne pas avoir peur, permettant un ensemble de (6) faux éléments pour se chevaucher juste en dessous de la boîte d'entrée réelle. comme suit:
Il n'y a en fait aucune marge ~, juste pour le voir plus clairement.
De plus, nous devons définir l'opcité de la boîte de saisie réelle de niveau supérieur sur 0, de sorte que celle présentée à l'utilisateur est cet ensemble de fausses boîtes d'entrée.
Cependant, lorsque l'utilisateur entre à nouveau, il fonctionne toujours sur la boîte d'entrée réelle. Après cela, nous remplirons l'entrée de l'utilisateur dans la boîte d'entrée forgée à son tour ~
Très simple ~
2. Code de code
Tout d'abord, le DOM individuel est initialisé et l'événement d'entrée est lié.
fonction init (fun) {var that = this; this.callback = fun; that.reinput = contener.children [0]; that.bogusInput = contener.children [1]; that.bogusinputarr = that.bogusinput.children; that.maxLength = that.bogusinput [0] .getAtTraut = function () {that.setValue ();} that.realinput.onpropertychange = function () {that.setValue ();}}Ensuite, lorsque l'entrée de l'utilisateur est entrée, l'entrée de l'utilisateur est entrée respectivement dans la zone d'entrée forgée
function setValue () {this.realinput.value = this.realinput.value.replace (// d / g, ""); console.log (this.realinput.value.replace (// d / g, "")) var real_str = this.realinput.value; for (var i = 0; i <this.maxLingment; i ++) {this.bogusInputarr [i] .value = real_str [i]? Real_str [i]: "";} if (real_str.length> = this.maxlength) {this.realinput.value = real_str.substring (0,6); this.callback ();}}Enfin, nous devons obtenir le mot de passe ~, obtenons une méthode pour obtenir la valeur finale ~
fonction getBoxInputValue () {var realValue = ""; for (var i dans this.bogusInputarr) {if (! this.bogusinputarr [i] .value) {Break;} realValue + = this.bogusInputarr [i] .value;} realValue;}Ce qui précède est l'implémentation JS de la fonction d'entrée de mot de passe à six chiffres introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!