나는 얼마 전에 HTML과 CSS를 배웠고,이 분야에 관심을 갖고, JavaScript (Third Edition)에서 고급 프로그래밍을 배우기 시작했습니다. 나는 요즘 배우고 있었고 단지 사건과 대본의 내용을 배웠습니다. 며칠 전, 교사는 코드를 작성하도록 요청했습니다. JavaScript 형식으로 Enter 키와 이동 키를 왼쪽과 오른쪽으로 이동하여 한 텍스트 상자에서 이전 또는 다음 텍스트 상자로 초점을 이동하십시오. 지금까지 배운 지식을 사용하여 코드를 작성하려고했습니다. 나는 서면에서 몇 가지 어려움을 겪었다 : 모듈러스 계산; 이 기능과 인수를 사용하여 함수 내에서 트리거 이벤트를 찾으십시오. addhandler () 메소드를 사용하여 이벤트 핸들러를 이벤트에 추가하십시오. 교사의 도움으로 위의 문제를 해결했습니다. 나는이 코드를 통해 많은 지식을 배웠다고 느꼈으므로 정렬 한 후 의견을 썼다.
코드 사본은 다음과 같습니다.
<html>
<head lang = "en">
<meta charset = "utf-8">
<제목> </title>
</head>
<body>
<양식>
<div> <입력 유형 = "텍스트"> </div>
<div> <입력 유형 = "텍스트"> </div>
<div> <입력 유형 = "텍스트"> </div>
<div> <입력 유형 = "텍스트"> </div>
<div> <입력 유형 = "텍스트"> </div>
<div> <입력 유형 = "제출"> </div>
</form>
<cript>
함수 is_down (e) {
var isdown;
e = e || Window.event;
스위치 (e.keycode) {
사례 13 : // 키를 입력합니다
사례 39 : // 키를 오른쪽으로 이동합니다
사례 40 : // 키 아래로 이동합니다
isdown = true;
부서지다;
사례 37 : // 키를 왼쪽으로 이동합니다
사례 38 : // 키를 위로 이동합니다
isdown = false;
부서지다;
}
반환 Isdown;
}
함수 key_up () {
// 함수를 호출 할 때 함수 자체가 이것과 인수를 생성합니다.
// 이것과 인수를 사용하여 필드를 찾아 각각 이벤트를 트리거합니다.
var e = 인수 [1];
return is_down (e) === 정의되지 않았습니까? true : handle_element (this, is_down (e));
}
함수 핸들 _element (필드, is_down) {
var elements = field.form.elements;
for (var i = 0, len = elements.lenges.length-1; i <len; i ++) {
if (field == elements [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) {
진실을 반환하십시오.
}
요소 [i] .focus ();
var element_arr = [ ''버튼 ','제출 ','재설정 ','select-one ','textArea '];
if (element_arr.join ( ','). indexof (elements [i] .type)> -1)
요소 [i] .select ();
거짓을 반환합니다.
}
// 취소 기본 제출 양식 이벤트를 입력하십시오
document.onkeydown = function (e) {
e = e || Window.event;
if (e.keyCode == 13) {
E.PreventDefault? e.preventDefault () : (e.returnValue = false);
}
};
// 브라우저에서 AddEventListener 및 AttachEvent (IE)를 인식합니다
함수 addhandler (요소, 유형, 핸들러) {
if (element.addeventListener)
element.addeventListener (유형, 핸들러, 거짓);
else if (element.attachevent)
요소 .ATTACHEVENT ( "on" + 유형, 핸들러);
또 다른
요소 [ "on" + type] = 핸들러;
}
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);
}
</스크립트>
</body>
</html>
위는 코드의 모든 내용입니다. 나는 개인적으로 글이 매우 포괄적이며 고려해야 할 모든 것들이 처리되었다고 생각합니다. 나는 모두가 그것을 좋아하기를 바랍니다.