Иногда вы столкнетесь с полями формирования, похожих на вышеупомянутые. Мы можем ограничить длину ввода для каждого поля и автоматически переключать фокус, когда достигается длина входа, чтобы улучшить простоту формы
Кода -копия выглядит следующим образом:
<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 = "Отправить" value = "pospent">
</form>
Кода -копия выглядит следующим образом:
(function () {
Функция TabForward (e) {
e = e || window.event;
var target = e.target || e.srcelement;
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 ();
}
перерыв;
}
}
}
}
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);
}) ();
Код на самом деле очень прост. Следующий фокус.
Давайте кратко поговорим о двух атрибутах:
Свойство формы Target.form указывает на форму, к которой принадлежит текущее поле
Атрибут Elements Form.Elements представляет собой набор всех элементов формы (поля) в форме. Эта коллекция элементов является упорядоченным списком, содержащим все поля в форме, такие как <pint>, <Textarea>, <Tood> и <Fieldset>. Каждое поле формы находится в порядке, в котором они появляются в тегах в том же порядке, в котором к ним можно получить доступ по атрибутам местоположения и имени. Например:
Кода -копия выглядит следующим образом:
var form = document.getElementbyId ("myform");
var TextBox1 = form.Elements [0];
var TextBox2 = form.Elements ["tel2"];
Наконец, давайте посмотрим на приведенный выше код и обнаружим, что есть еще некоторые проблемы, такие как этот код
Кода -копия выглядит следующим образом:
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);
Найдя нет, мы добавили один и тот же обработчик событий в каждое поле. Если вы используете этот метод для каждого элемента в сложном веб -приложении, то в результате появится бесчисленные коды для добавления обработчиков событий. В настоящее время для решения этой проблемы можно использовать делегирование событий
Другой код остается неизменным.
Кода -копия выглядит следующим образом:
var form = document.getElementbyId ("myform");
form.addeventlistener ("keyup", tabborward, false);
Тогда какова комиссия этого мероприятия?
Делегирование событий использует пузырьки событий, и только указывает обработчик событий для управления всеми событиями определенного типа. Например, для события Keyup здесь вам нужно только указать обработчик событий Onkeyup в элемент формы, не добавляя события в каждое поле.