jQuery : 텍스트 상자 내에서 Tab 키 누르기를 캡처하는 방법


145

Tab 키 누르기를 캡처하고 기본 작업을 취소하고 내 자신의 자바 스크립트 함수를 호출하고 싶습니다.

답변:


249

편집 : 요소가 동적으로 삽입 되므로 예제와 같이 위임on() 을 사용해야 하지만 @Marc 주석과 같이 IE의 키 누르기 이벤트는 문자가 아닌 키를 캡처하지 않기 때문에 키 다운 이벤트에 바인딩해야합니다.

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

예를 확인 하십시오 .


나는 IE6에서 Tab 키를 누르면 + 이벤트가 발생하지 않습니다 때 ... 나는 .live ( '키를 누를 때', FN)를 사용합니다 (그것은 비록 영숫자 키에 화재)
존 에릭슨

라이브에서만 작동하는 경우 텍스트 상자 요소를 동적으로 삽입하는 중일 수 있습니다. 요소가 이미 페이지에있는 경우 작동합니다. jsbin.com/oguhe
CMS

텍스트 상자가 동적으로 삽입됩니다. ID가 #textbox 인 예제는 질문을 단순화하는 것입니다. =)
Jon Erickson

@Jon, $ (selector) .live ( "keydown", fn)을 사용하지 않는 이유는 무엇입니까? IE에서는 키 누르기가 문자가 아닌 키 (예 : Tab)에 대해 작동하지 않기 때문에 CMS에서 키 다운 사용을 제안합니다.
Marc

5
@ AppleGrew : 예, 그러나 적어도 키 누르기에 대해서는 사실이 아닙니다. 탭의 경우 e. 0이고 e.keyCode는 9입니다. FF 3.5.16, jQuery 1.6.2에서 테스트되었습니다.
johndodo

19

jQuery 1.9의 실제 예제 :

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});

2
e.preventDefault();텍스트 상자에 공백이 삽입되지 않도록 두 번 만듭니다 .
STIL

12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

2
또한 기본 조치를 취소하려면 e.preventDefault (); 함수의 첫 번째 줄에.
Josh Leitzel

@Jon, keypress는 IE에서 문자가 아닌 키를 캡처하지 않습니다
Marc

@Marc IE 및 FF와 어떻게 호환됩니까?
Jon Erickson

4
^^ 아이러니 ... jQuery는 브로 더 사이의 간격을 메워야하므로 이와 같은 것에 대해 걱정할 필요가 없습니다.
Jagd

@Jagd, jQuery는 의도를 유추 할 수 없습니다. keypress 및 keydown은 적절한 이유로 동일하지 않습니다. 이 상황은 구별이 필요하지 않습니다.
Marc

7

위의 방법은 저에게 효과가 없었습니다. 비트 오래된 jquery를 사용하고있을 수도 있습니다. 마지막으로 아래에 표시된 코드 스 니펫이 작동합니다-누군가가 같은 위치에있는 경우에 게시

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

5

탭에서 키 다운을 사용하는 중요한 부분은 탭이 항상 이미 무언가를 시도한다는 것을 알고 있다는 것입니다. 마지막에 "거짓을 반환"하는 것을 잊지 마십시오.

여기 내가 한 일이 있습니다. .blur에서 실행되는 기능과 양식 포커스가있는 위치를 바꾸는 기능이 있습니다. 기본적으로 양식 끝에 입력을 추가하고 흐림 계산을 실행하는 동안 이동합니다.

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });

4

이 시도:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});

1

ID가 txtName 인 TextBox가 있다고 가정합니다.

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 

1

JQuery API를 사용하여 이벤트 탭을 캡처 할 수 있습니다 .

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

evt.preventDefault ()를 추가 한 후 저에게 효과적입니다. if
LowFieldTheory

-1

이것은 나를 위해 일했다 :

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.