当输入长度达到时自动切换窗体焦点。
有时会出现类似于上面的表单字段，我们可以限制每个字段的输入长度。当输入长度达到时，焦点将自动切换，以增强表单的可用性。复制代码代码如下所示：
—
—
复制代码代码如下所示：
（函数（）{（））
功能tabforward（e）{
E = e window.event | |；
VaR目标= e.target e.srcelement | |；
如果（target.value.length =目标。最大长度）{
VaR形式= target.form；
对于（var i = 0，len = form.elements.length；我< len；i++）{
如果（表单元素{ } =目标）{
如果（表单元素{ + }）{
表单元素{焦点}；
}
打破；
}
}
}
}
VaR textBox1 = document.getelementbyid（txt1 ）；
VaR textBox2 = document.getelementbyid（txt2 ）；
无功textbox3 = document.getelementbyid（txt3 ）；
textbox1.addeventlistener（KeyUp
textbox2.addeventlistener（KeyUp
textbox3.addeventlistener（KeyUp
}）；
很简单的代码，以确定是否输入字符串的长度等于事件对象的MaxLength属性长度。如果它是相等的，并且表单有下一个字段，它会自动切换到下一个焦点。
简单地说两个属性：
的target.form形式属性指向当前领域属于是只读形式的指针
form.elements元素的属性是一个集合的所有元素（字段）的形式。这种元素的集合是一个包含所有领域的形式，如、、和顺序表。在元素设置每个表单字段的顺序是他们出现在标签的顺序相同，可以可以按照位置和名称的特点。例如：
复制代码代码如下所示：
VaR形式= document.getelementbyid（以下是我参考网上）；
VaR textBox1 =形式。元素{ 0 }；
VaR textBox2 =形式。元素{TEL2}；
最后，让我们看看上面的代码，发现有一些问题，比如这个代码。
复制代码代码如下所示：
VaR textBox1 = document.getelementbyid（txt1 ）；
VaR textBox2 = document.getelementbyid（txt2 ）；
无功textbox3 = document.getelementbyid（txt3 ）；
textbox1.addeventlistener（KeyUp
textbox2.addeventlistener（KeyUp
textbox3.addeventlistener（KeyUp
不，我们为每个字段添加了相同的事件处理程序。如果在复杂的Web应用程序中，这样使用每个元素，就会有无数的代码来添加事件处理程序。此时，事件委托可以用来解决这个问题。
如果其他代码不改变，将上面的六行代码改为下面两行就可以得到更好的结果。
复制代码代码如下所示：
VaR形式= document.getelementbyid（以下是我参考网上）；
form.addeventlistener（KeyUp
那么，什么是事件委托，一个简单的原则，这里没有详细说明。
事件委托使用事件冒泡，只有一个事件处理程序的规定，使所有类型的事件是可以管理的。例如，这里的KeyUp事件只需指定无需添加一个事件的每一个领域一个表单元素onkeyup事件处理程序。