Sometimes you will encounter form fields similar to those above. We can limit the input length for each field, and automatically switch focus when the input length is reached to enhance the ease of form
The code copy is as follows:
<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="submit" value="Submit">
</form>
The code copy is as follows:
(function () {
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();
}
break;
}
}
}
}
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);
})();
The code is actually very simple. It determines whether the length of the input string is equal to the length of the maxLength attribute of the event target. If it is equal and there is a next field in the form, it will automatically switch to the next focus.
Let’s briefly talk about two attributes:
The target.form form property points to the form to which the current field belongs. It is read-only
The form.elements elements attribute is a collection of all form elements (fields) in a form. This collection of elements is an ordered list containing all fields in the form, such as <input>, <textarea>, <button>, and <fieldset>. Each form field is in the order in which they appear in the tags in the same order that they can be accessed by location and name attributes. For example:
The code copy is as follows:
var form = document.getElementById("myForm");
var textbox1 = form.elements[0];
var textbox2 = form.elements["tel2"];
Finally, let’s take a look at the above code and find that there are still some problems, such as this code
The code copy is as follows:
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);
Found no, we added the same event handler to each field. If you use this method for each element in a complex web application, then there will be countless codes for adding event handlers as a result. At this time, the event delegation can be used to solve this problem
The other code remains unchanged. If you replace the above six lines of code with the following two lines, you will get the same result. Do you feel much better?
The code copy is as follows:
var form = document.getElementById("myForm");
form.addEventListener("keyup", tabForward, false);
Then what is the commission of the event? Let me briefly talk about the principle, and the details will not be explained here.
Event delegation takes advantage of event bubbles, and only specifies an event handler to manage all events of a certain type. For example, for the keyup event here, you only need to specify an onkeyup event handler to the form element, without adding events to each field.