글자를 양식에 입력 할 때 키보드 기능이 실행되지 않도록하려면 어떻게합니까?

Question

키보드의 "N"및 "P"키를 눌렀을 때 다음/이전에 스크롤하는 스크립트가 있습니다. 내 질문은 사용자가 이러한 문자를 어떤 형식 (예 : 검색 필드, 로그인 필드 등) 으로든 입력 할 때이 문제를 방지하는 방법입니다. John은 폼 대신 N을 쓰지 않고 scroll 함수를 발생시킵니다. 그 행동을 고치는 방법?

내 코드는 다음과 같습니다 :

$(document).keydown(function (evt) { 
    if (evt.keyCode == 78) { 
     evt.preventDefault(); 
     scrollToNew(); 
    } else if (evt.keyCode == 80) { 
     evt.preventDefault(); 
     scrollToLast(); 
    } 
}); 

감사합니다.

Answer 1

이벤트 개체는 실제로 이벤트가 발생한 위치를 알려주는 target 속성을가집니다 (이후에는 문서 수준 처리기로 버블 링됩니다). 따라서 양식 필드 요소에 대해 evt.target을 테스트하고 일치하는 경우 특수 논리를 수행하지 마십시오. 이 작업을 수행하는 가장 쉬운 방법은 아마

는 closest을 사용하는 것입니다, 예 : 요소와 나는 가장 가까운 양식 필드는 요소로 시작하는 무슨 부탁 해요

이

$(document).keydown(function (evt) { 
    if (!$(evt.target).closest('input, select, textarea')[0]) { 
     if (evt.keyCode == 78) { 
      evt.preventDefault(); 
      scrollToNew(); 
     } else if (evt.keyCode == 80) { 
      evt.preventDefault(); 
      scrollToLast(); 
     } 
    } 
}); 

(closest부터 시작 당신은 그것을 제공) 그리고 조상을 통해 일해라. non가 있으면 반환 된 jQuery 객체는 비어 있고 [0]은 undefined을 반환합니다. 따라서 !undefined은 true이므로 양식 필드에 이 아닌이 아닌 로직이 처리됩니다.

Answer 2

나는 폼의 내부에서 키보드 제어가 필요하지 않은 경우

$('form').on('keydown', function(event) {event.stopPropagation();}); 

같은 트릭을 할해야한다고 생각.

Answer 3

소스 DOM 노드를 가리키는 Event object의 target 속성을 사용하십시오. 그래서, 당신은 쉽게

var nn = evt.target.nodeName.toLowerCase(); 
if (nn != "input" && nn != "textarea") 
    // do your special handling 

를 사용할 수 있지만 요소 소유자 양식을 가리키는 form property의 실존, 확인하는 것이 더 쉬울 수 있습니다

if (! "form" in evt.target) 
    // do your special handling