Javascript는 Enter 키를 눌러 focus_javascript 기술을 전환하도록 구현합니다.

저는 얼마 전에 HTML과 CSS를 배웠고 이 부분에 관심을 가지게 되었습니다. 또한 요즘 JavaScript 고급 프로그래밍(3판)을 배우기 시작했고 이제 막 이벤트와 양식 스크립트에 대해 배웠습니다. 며칠 전 선생님께서 저에게 코드를 작성해 달라고 하셨습니다. 자바스크립트 형식에서 Enter 키와 위, 아래, 왼쪽, 오른쪽 키를 사용하여 한 텍스트 상자에서 이전 또는 다음 텍스트로 초점을 이동하는 코드입니다. 상자. 지금까지 배운 지식을 적용하여 코드를 작성하는 과정에서 몇 가지 어려움에 직면했습니다. 이벤트. 선생님의 도움으로 위의 문제를 해결했습니다. 이 코드를 통해 많은 지식을 배운 것 같아서 완성 후 댓글을 작성하여 게시하겠습니다.

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

   
   


   

       

       

       

       

       

       

         함수 is_down(e) {
          var isDown;
              e = e || window.event;
스위치(e.keyCode) {
사례 13: //Enter 키
사례 39: //오른쪽 키 이동
사례 40: //아래로 키 이동
~ ~                      isDown = true;
휴식;
사례 37: //왼쪽 키 이동
사례 38: //위로 이동 키
~ ~         isDown = false;
휴식;
            }
              return isDown;
}
         기능 key_up(){
//함수를 호출하면 함수 자체가 this와 인수를 생성합니다
//이것과 인수를 사용하여 각각 필드와 트리거된 이벤트를 찾습니다
            var e=arguments[1];
                return is_down(e) === 정의되지 않음 ? true : handler_element(this, is_down(e));
}
          함수 handler_element(필드, is_down) {
          var 요소 = field.form.elements;
for (var i = 0, len = elements.length-1; i < len; i ) {
If (필드 == 요소[i]) {
휴식;
                }
            }
i = is_down ? (i 1) % len : (i - 1) % len;
//(0===i && is_down) --> 마지막 텍스트 상자에 초점이 맞춰진 후 아래쪽 키를 누릅니다
//(-1===i && !is_down) --> 첫 번째 텍스트 상자에 초점이 맞춰진 후 위쪽 키를 누릅니다
If((0===i && is_down)||(-1===i && !is_down)){
                   true를 반환합니다.
            }
             요소[i].focus();
          var element_arr = ['버튼', '제출', '재설정', '선택', '텍스트 영역'];
If (element_arr.join(',').indexOf(elements[i].type) > -1)
                 요소[i].select();
              false를 반환합니다.
}
//Enter 시 기본 제출 양식 이벤트 취소
          document.onkeydown = 기능(e) {
              e = e || window.event;
If(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
            }
        };
//크로스 브라우저 인식 addEventListener 및 attachmentEvent(IE)
         함수 addHandler(요소, 유형, 핸들러) {
               if (element.addEventListener)
                                        element.addEventListener(type, handler, false);
              else if (element.attachEvent)
                  element.attachEvent("on" 유형, 핸들러);
           그 외
                      요소["on" 유형] = 핸들러;
}
         var elements = document.forms[0].elements;
for (var i = 0, len = elements.length; i < len; i ) {
//keyup 이벤트에 대한 key_up 이벤트 핸들러 추가
              addHandler(elements[i], "keyup", key_up);
}