上記のフィールドと同様のフォームフィールドに遭遇する場合があります。各フィールドの入力長を制限し、フォームの容易さを高めるために入力長に達したときにフォーカスを自動的に切り替えることができます
コードコピーは次のとおりです。
<form id = "myform">
<入力型= "テキスト" name = "tel1" id = "txt1" maxlength = "3"> -
<入力型= "テキスト" name = "tel2" id = "txt2" maxlength = "3"> -
<入力型= "テキスト" name = "tel3" id = "txt3" maxlength = "4">
<br>
<入力型= "submit" value = "submit">
</form>
コードコピーは次のとおりです。
（関数 （） {
タブフォワード（e）{
e = e ||。
var Target = E.Target ||。
if（target.value.length ===ターゲット.maxlength）{
var form = target.form;
for（var i = 0、len = form.elements.length; i <len; i ++）{
if（form.elements [i] ===ターゲット）{
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）;
}）（）;
実際には、入力文字列の長さがイベントターゲットの最大属性の長さに等しいかどうかを決定します。次の焦点。
2つの属性について簡単に説明しましょう。
Target.Formのプロパティは、現在のフィールドが属するフォームを指します
Form.Elements Elements属性は、フォームのすべてのフォーム要素（フィールド）のコレクションです。この要素のコレクションは、<inupt>、<textarea>、<button>、<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）;
いいえ、同じイベントハンドラーを各フィールドに追加しました。複雑なWebアプリケーションで各要素にこのメソッドを使用すると、結果としてイベントハンドラーを追加するためのコードが無数にあります。現時点では、イベント代表団を使用してこの問題を解決できます
他のコードは、上記の6行を次の2行に置き換えると、
コードコピーは次のとおりです。
var form = document.getElementById（ "myform"）;
form.addeventlistener（ "keyup"、tabforward、false）;
次に、この原則について簡単に話しましょう。ここでは詳細を説明します。
イベント委任はイベントバブルを利用し、特定のタイプのすべてのイベントを管理するためのイベントハンドラーのみを指定します。たとえば、ここのキーアップイベントでは、各フィールドにイベントを追加せずに、onkeyupイベントハンドラーをフォーム要素に指定する必要があります。