As regras antigas ~ Quando você for para a demonstração, você se divertirá primeiro: um dispositivo de entrada de senha de personagem de seis dígitos
Em seguida, adicione o código-fonte: entrada de senha de caracteres de seis dígitos
Da demonstração, posso ver que, primeiro, apenas seis caracteres podem ser inseridos e apenas os números podem ser inseridos. Após a entrada de seis dígitos, um retorno de chamada será executado automaticamente (o resultado da entrada é exibido na demonstração)
1. Vamos falar sobre o princípio primeiro
Primeiro de tudo, precisamos de duas coisas: uma é uma caixa de entrada real, ou seja, está realmente em foco e obtém a entrada de entrada de entrada do usuário; O outro é um conjunto de caixas de entrada pseudo, ou seja, ele realmente não obtém o foco, mas exibe apenas o valor inserido atualmente (é claro, a senha é apenas um pequeno ponto preto ~).
Em segundo lugar, precisamos ser simples e não ter medo disso, permitindo que um conjunto de (6) elementos falsos se sobreponha logo abaixo da caixa de entrada real. do seguinte modo:
Na verdade, não há margem ~, apenas para vê -la com mais clareza.
Além disso, precisamos definir a opção de caixa de entrada real de nível superior como 0, para que a apresentada ao usuário seja esse conjunto de caixas de entrada falsas.
No entanto, quando o usuário entra novamente, ele ainda opera na caixa de entrada real. Depois disso, preencheremos a entrada do usuário na caixa de entrada forjada por sua vez ~
Muito simples ~
2. Código do código
Primeiro, o DOM individual é inicializado e o evento de entrada está vinculado.
function init (fun) {var thats = this; this.callback = fun; that.RealInput = container.Children [0]; that.BogusInput = CONTENTER.CHILDREN [1]; that.BogusinputArr = that.Bogusinput.Children; that.maxlength = thatsLex); = function () {that.setValue ();} that.realInput.onPropertyChange = function () {that.setValue ();}}Então, quando a entrada do usuário é inserida, a entrada do usuário é inserida na caixa de entrada forjada, respectivamente
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; para (var i = 0; i ++) {this.BogusInputArr [i] .Value = real_str [i]? real_str [i]: "";} if (real_str.length> = this.maxLength) {this.RealInput.Value = real_st.substring (0,6); this.callback ();}}Por fim, precisamos obter a senha ~, vamos obter um método para obter o valor final ~
function getBoxInputValue () {var realValue = ""; para (var i em this.BogusInputArr) {if (! this.BogusInputArr [i] .Value) {break;} realValue += this.BogusinpUrr [i] .Value;} realvalue;}O exposto acima está a implementação do JS da função de entrada de senha de caracteres de seis dígitos introduzida 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!