有时候会遇到和上面类似的表单字段。我们可以给每个字段限制输入长度，当达到输入长度时自动切换焦点，以增强表单的易用性
찾다

집  >  기사  >  웹 프론트엔드  >  입력 길이에 도달하면 양식이 자동으로 포커스를 전환합니다_javascript 기술

입력 길이에 도달하면 양식이 자동으로 포커스를 전환합니다_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:53:13973검색
입력 길이에 도달하면 양식이 자동으로 포커스를 전환합니다_javascript 기술
가끔 위와 비슷한 양식 필드를 접하게 될 때가 있습니다. 각 필드의 입력 길이를 제한하고 입력 길이에 도달하면 자동으로 포커스를 전환하여 양식의 활용도를 높일 수 있습니다
코드 복사 코드는 다음과 같습니다.


-
-






코드 복사 코드는 다음과 같습니다.

(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] = == 대상) {
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);

})();

코드는 실제로 입력 문자열의 길이가 동일한지 확인합니다. 이벤트 대상의 maxLength 속성 길이에 해당하는 경우 양식에 다음 필드가 있으면 자동으로 다음 포커스로 전환됩니다.

다음 두 가지 속성에 대해 간략하게 설명하겠습니다.

target.form form 속성은 현재 필드가 속한 양식에 대한 포인터를 가리킵니다.

form.elements 요소 속성은 에 있는 모든 양식 요소(필드)의 양식 컬렉션입니다. 요소 컬렉션은 ,