Este artigo implementa uma interface semelhante à senha de pagamento da Alipay, que só pode inserir números e apenas 6 dígitos podem ser inseridos.
Primeiro, deixe -me mostrar as renderizações. Se você se sentir bem, consulte o código de implementação.
1. Folha de estilo
.wrap {margin: 10px automático; largura: 329px; altura: 640px; tapc-top: 200px;}. inputBoxContainer {width: 240px; altura: 50px; margin: 0 Auto; posição: relativa;}. sólido; Radio de fronteira: 7px; -moz-Border-Radius: 7px; -Webkit-Border-Radius: 7px; Overflow: Hidden; Posição: Absoluto; Z-Index: 0;}. InputBoxContainer .RealInput {Width: 100%; Altura: 100%; Posição: Absolute; 1; filtro: alfa (opacidade = 0);-Moz-opacidade: 0; opacidade: 0;}. InputBoxContainer .BOGUSINput Entrada {preenchimento: 0; largura: 16,3%; altura: 100%; float: esquerda; fundo: #fffffffff; solid;}.inputBoxContainer .bogusInput input:last-child{border: none;}.confirmButton{width: 240px;height: 45px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;background: #f4f4f4;border: #d5d5d5 1px solid;display: Block; Fonte-tamanho: 16px; margem: 30px Auto; Margin-Bottom: 20px;}. ShowValue {Larth: 240px; altura: 22px; altura da linha: 22px; font-size: 16px; text-align: Center; Margin: 0 Auto;}2. Código HTML
<div> <div id = "inputBoxContainer"> <input type = "text"/> <div> <input type = "senha" maxlength = "6" desativado/> <input type = "senha" maxlengthing = "6" Disabled/> <input Type = "senha" maxlength = "6" Disabled/> <in " maxLength = "6" desativado/> <input type = "senha" maxlength = "6" desativado/> <input type = "senha" maxlength = "6" desativado/> <input type = "senha" maxlengthing = "6" desativado/> <input tipo "senha" maxlengthing = "6" Disabled/> <"inputing" MAXLIGNE = "6" DiSabled = "6" inputer/> <input = "senha" maxLlength = "6" Disabled/> <" type = "senha" maxlength = "6" desativado/> <input type = "senha" maxlength = "6" desativado/> <input type = "senha" maxlength = "6" desativado/</div> </div> <botão id = "confirmbutton"> view </button> <p id = "showValue"> </p>
3. Efeito lógico de controle de código JS
(function () {var container = document.getElementById ("inputBoxContainer"); boxInput = {maxLength: "", realInput: "", bogusInput: "", bogusInputarr: "", funBack: "", init: function) {var que = this; = container.Children [1]; that.BogusInputArr = that.BogusInput.Children; function () {that.setValue ();}}, setValue: function () {this.RealInput.value = this.realInput.value.replace (// d/g, ""); console.Log (this.RealInput.Value.Rplace (// d/g, "")) var real_str = this.r.R.R.R.R.Rplate.Rplace (// D/g, "")) this.maxLength; realvalue = ""; para (var i em this.BogusInputarr) {if (! this.BogusInputarr [i] .Value) {break;} realValue += this.BogusInputarr [i] .Value;} retornar realvalue;}}}) () boxInput.init (function () {getValue ();}); document.getElementById ("confirmButton"). OnClick = function () {getValue ();} função getValue () {document.GelementById ("ShowValue ();O acima exposto é a caixa de entrada de senha de pagamento do Alipay com base no JS introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!