때로는 위의 것과 유사한 형태의 필드를 만나게됩니다. 각 필드의 입력 길이를 제한하고 입력 길이에 도달하면 양식의 용이성을 향상시킬 때 초점을 자동으로 전환 할 수 있습니다.
코드 사본은 다음과 같습니다.
<form id = "myform">
<입력 유형 = "text"name = "tel1"id = "txt1"maxlength = "3">-
<입력 유형 = "텍스트"이름 = "tel2"id = "txt2"maxlength = "3">-
<입력 유형 = "text"name = "tel3"id = "txt3"maxlength = "4">
<br>
<입력 유형 = "제출"값 = "제출">
</form>
코드 사본은 다음과 같습니다.
(기능 () {
기능 tabforward (e) {
e = e || window.event;
var 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);
}) ();
코드는 실제로 입력 문자열의 길이가 이벤트 대상의 MaxLength 속성의 길이와 동일하고 양식의 다음 필드가 있는지 여부를 결정합니다. 다음 초점.
두 가지 속성에 대해 간단히 이야기 해 봅시다.
대상 형식 속성은 현재 필드가 속하는 형태를 가리 킵니다
form.elements 요소 속성은 양식의 모든 양식 요소 (필드)의 모음입니다. 이 요소 모음은 <input>, <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);
아니오, 우리는 각 필드에 동일한 이벤트 핸들러를 추가했습니다. 복잡한 웹 애플리케이션에서 각 요소 에이 방법을 사용하는 경우 결과적으로 이벤트 핸들러를 추가하기위한 수많은 코드가 있습니다. 현재 이벤트 대표단은이 문제를 해결하는 데 사용될 수 있습니다.
다른 코드는 다음과 같은 두 줄로 바꾸면 동일한 결과를 얻을 수 있습니다.
코드 사본은 다음과 같습니다.
var form = document.getElementById ( "myform");
form.addeventListener ( "keyup", tabforward, false);
그렇다면 이벤트의 커미션은 무엇입니까?
이벤트 대표단은 이벤트 버블을 활용하며 특정 유형의 모든 이벤트를 관리하기위한 이벤트 핸들러 만 지정합니다. 예를 들어, 여기에서 KeyUp 이벤트의 경우 각 필드에 이벤트를 추가하지 않고도 OnKeyUp 이벤트 핸들러를 양식 요소에만 지정하면됩니다.