Quando o comprimento da entrada for atingido, o formulário mudará automaticamente o foco

Às vezes, você encontra campos de forma semelhantes aos acima. Podemos limitar o comprimento da entrada para cada campo e alternar automaticamente o foco quando o comprimento da entrada é alcançado para melhorar a facilidade de forma

A cópia do código é a seguinte:

<form id = "myform">

<input type = "text" name = "tel1" id = "txt1" maxlength = "3">-

<input type = "text" name = "tel2" id = "txt2" maxlength = "3">-

<input type = "text" name = "tel3" id = "txt3" maxlength = "4">

<br>

<input type = "submite" value = "submit">

</morm>

A cópia do código é a seguinte:

(function () {

função tabforward (e) {

e = e || janela.event;

VAR Target = E.Target || E.SrceLent;

if (Target.Value.Length === Target.MaxLength) {

var form = Target.form;

for (var i = 0, len = form.elements.length; i <len; i ++) {

if (form.Elements [i] === Target) {

if (form.Elements [i ++]) {

form.Elements [i ++]. Focus ();

}

quebrar;

}

}

}

}

var textbox1 = document.getElementById ("txt1");

var textbox2 = document.getElementById ("txt2");

var textbox3 = document.getElementById ("txt3");

textbox1.addeventListener ("keyup", tabforward, false);

textbox2.addeventListener ("keyup", tabforward, false);

textBox3.adDeventListener ("KeyUp", tabforward, false);

}) ();

O código é realmente muito simples. Próximo foco.

Vamos falar brevemente sobre dois atributos:

O Formulário Target.form aponta para o formulário ao qual o campo atual pertence

O atributo Form.Elements Elements é uma coleção de todos os elementos de formulário (campos) em um formulário. Esta coleção de elementos é uma lista ordenada que contém todos os campos no formulário, como <input>, <sexttarea>, <butto> e <dieldset>. Cada campo de formulário está na ordem em que eles aparecem nas tags da mesma ordem em que podem ser acessados ​​por atributos de local e nome. Por exemplo:

A cópia do código é a seguinte:

var form = document.getElementById ("myform");

var textBox1 = form.Elements [0];

var textBox2 = form.Elements ["tel2"];

Por fim, vamos dar uma olhada no código acima e descobrir que ainda existem alguns problemas, como este código

A cópia do código é a seguinte:

var textbox1 = document.getElementById ("txt1");

var textbox2 = document.getElementById ("txt2");

var textbox3 = document.getElementById ("txt3");

textbox1.addeventListener ("keyup", tabforward, false);

textbox2.addeventListener ("keyup", tabforward, false);

textBox3.adDeventListener ("KeyUp", tabforward, false);

Encontrado não, adicionamos o mesmo manipulador de eventos a cada campo. Se você usar esse método para cada elemento em um aplicativo Web complexo, haverá inúmeros códigos para adicionar manipuladores de eventos como resultado. Neste momento, a delegação do evento pode ser usada para resolver este problema

O outro código permanece inalterado.

A cópia do código é a seguinte:

var form = document.getElementById ("myform");

form.AddeventListener ("KeyUp", tabforward, false);

Então, qual é a comissão do evento? Deixe -me falar brevemente sobre o princípio, e os detalhes não serão explicados aqui.

A delegação de eventos aproveita as bolhas de eventos e apenas especifica um manipulador de eventos para gerenciar todos os eventos de um determinado tipo. Por exemplo, para o evento KeyUp aqui, você só precisa especificar um manipulador de eventos onkeyup para o elemento de formulário, sem adicionar eventos a cada campo.