The form automatically switches focus when the input length is reached

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140406170834.gif? 20143617846 ">
Sometimes you will encounter a form field similar to the one 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 use of the form

 
<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> 

 
(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 simple enough to determine whether the length of the input string is the same as the maxLength property of the event target, and if it is, and the form has the next field, it automatically switches to the next focus.

The following two properties are briefly described:

The target.form property points to a pointer to the form to which the current field belongs. It is read-only

The form.elements elements attribute is a collection of all the form elements (fields) in the form. The elements collection is an ordered list containing all the fields in the form, such as < Input> , < Textarea> , < Button> And < Fieldset> . Each form field is in the same order in the elements collection as they appear in the tag, and can be accessed by the location and name attributes. Such as:

 
var form = document.getElementById("myForm"); 
var textbox1 = form.elements[0]; 
var textbox2 = form.elements["tel2"]; 

Finally, let's take a look at the code above and see that it still has some problems, such as this code

 
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); 

Finding no, we added the same event handler for each field. If you do this for every element in a complex web application, the result is endless code to add event handlers. At this point, you can use event delegates to solve this problem

The rest of the code is the same, so if you replace the top six lines of code with the bottom two, you'll get the same result

 
var form = document.getElementById("myForm"); 
form.addEventListener("keyup", tabForward, false); 

So what is an event delegate? I'm just going to say how it works, but I'm not going to go into the details here. Right

Event delegates take advantage of event bubbling and specify only one event handler to manage all events of a certain type. For example, the keyup event here requires only an onkeyup event handler to be specified to the form element, rather than adding events to each field