Implémentez une boîte d'entrée de mot de passe de paiement similaire à Alipay en fonction de JS

Cet article met en œuvre une interface similaire au mot de passe de paiement Alipay, qui ne peut entrer que des numéros et seulement 6 chiffres peuvent être saisis.

Tout d'abord, permettez-moi de vous montrer les rendus. Si vous vous sentez bien, veuillez vous référer au code d'implémentation.

1. Fiche de style

 .WRAP {marge: 10px auto; largeur: 329px; hauteur: 640px; padding-top: 200px;}. InputBoxContainer {width: 240px; hauteur: 50px; margin: 0 auto; position: relative;}. EputBoxContainer. # C3C3 1 1 Width: 100%; Height: 100%; solide; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; overflow: Hidden; position: absolu; z-index: 0;}. inputBoxContainer. 1; filtre: alpha (opacité = 0); - Moz-opacity: 0; opacité: 0;}. InputBoxContainer. solide;}. InputBoxContainer. Block; Font-Size: 16px; marge: 30px auto; margin-fond: 20px;}. showValue {width: 240px; height: 22px; line-height: 22px; fonte-size: 16px; text-align: Center; marge: 0 auto;}

2. Code HTML

 <div> <div id = "inputBoxContainer"> <input type = "text" /> <div> <input type = "mot de passe" maxLength = "6" Disabled /> <input type = "password" maxLength = "6" Disabled /> <Input type = "mot de passe" MaxLength = "6" Disabled /> <Invable maxLengthreau = "6" Disabled /> <insember type = "mot de passe" maxLength = "6" Disabled /> <input type = "mot de passe" maxLength = "6" Disabled /> <input type = "mot de passe" maxLength = "6" Disable maxLength = "6" Disabled /> <input type = "mot de passe" maxLength = "6" Disabled /> <input type = "mot de passe" maxLength = "6" Disabled / </div> </ div> <Button id = "confirmButton"> View </ Button> <p id = "showValue"> </p> </v>

3. Effet logique de contrôle du code JS

 (function () {var contener = document.getElementById ("inputBoxContainer"); boxInput = {maxLength: "", reminut: "", bogusInput: "", bogusInputarr: "", callback: "", init: function (fun) {var that = this; this.callback = fun; that.realput = CONTERNER.CHILDRES [0]; That.BogusInput = Container.Childrens [1]; That.BogusInputAr = That.BogusInput.Children; that.realinput.onpropertychange = function () {that.setValue ();}}, setValue: function () {this.realinput.value = this.realinput.value.replace (// d / g, ""); console.log (this.realput.value.replace (// d / g, "") this.realinput.value; for (var i = 0; i <this.maxLength; 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 ();}}, getBoxInputValue: function () {var realValue = ""; for (var i in this.bogusInputarr) {if (! this.bogusInputarr [i] .value) {break;} realValue + = this.bogusInput [i]. realValue;}}}) () boxInput.init (function () {getValue ();}); document.getElementyid ("confirmButton"). onClick = function () {getValue ();} function getValue () {document.getElementBalid ("showValue"). InnerText = boxinut.get.get

Ce qui précède est la boîte d'entrée de mot de passe de paiement Alipay basée sur JS introduit 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!