programing

jQuery 키누름 화살표 키

sourcejob 2023. 10. 6. 21:03
반응형

jQuery 키누름 화살표 키

jQuery에서 화살표 키 누르기를 캡처하려고 하는데 이벤트가 트리거되지 않습니다.

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

영숫자 키에 대해서는 이벤트가 생성되지만 삭제, 화살표 키 등은 이벤트가 생성되지 않습니다.

내가 뭘 잘못해서 그런 것들을 포착하지 못하는 거지?

당신은 사용해야 합니다..keydown()왜냐면.keypress()키 유형 사용을 포착하면 "화살표"가 무시됩니다.e.which

결과 화면을 눌러 초점을 맞춘 다음(Fiddle 화면 오른쪽 하단) 화살표 키를 눌러 작동 여부를 확인합니다.

주의:

  1. .keypress()Shift, Esc, Delete와 함께 절대 발사되지 않습니다..keydown()할 것이다.
  2. 정말로..keypress()일부 브라우저에서는 화살표 키로 트리거되지만 크로스 browser가 아니므로 사용하기에 더 안정적입니다..keydown().

더 유용한 정보

  1. 사용가능.which아니면.keyCode이벤트 개체 - 일부 브라우저는 그 중 하나를 지원하지 않지만 jQuery를 사용할 때는 jQuery가 표준화하기 때문에 둘 다 사용해도 안전합니다.(나는 더 좋음).which문제가 없었음).
  2. 탐지하는 방법ctrl | alt | shift | META실제 캡처된 키를 사용하여 누르면 이벤트 개체의 다음 속성을 확인해야 합니다. 이벤트 개체를 누르면 TRUE로 설정됩니다.
    • event.ctrlKey- ctrl
    • event.altKey- 알트의
    • event.shiftKey- 교대의
    • event.metaKey- META(명령 OR Windows Key )
  3. 마지막으로 몇 가지 유용한 키 코드(전체 목록의 경우 - 키코드-치트시트):

    • 입력 : 13
    • 업: 38
    • 다운: 40
    • 오른쪽 : 39
    • 좌측: 37
    • Esc: 27
    • 스페이스바: 32
    • Ctrl: 17
    • 알트: 18
    • 시프트: 16
$(document).keydown(function(e) {
    console.log(e.keyCode);
});

키 누르기 이벤트는 화살표 키를 감지하지만 일부 브라우저에서는 감지되지 않습니다.그래서 키다운을 사용하는 것이 좋습니다.

콘솔 로그에 입력해야 하는 키 코드는 다음과 같습니다.

  • left = 37
  • = 38까지
  • 오른쪽 = 39
  • 아래 = 40

화살표 키를 누르는지 확인할 수 있는 방법은 다음과 같습니다.

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) 
      alert( "arrowkey pressed" );          
});

jsfiddle 데모

left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

});

JQuery의 링크를 참조해주시기 바랍니다.

http://api.jquery.com/keypress/

라고 써있네요.

브라우저가 키보드 입력을 등록하면 키 누름 이벤트가 요소로 전송됩니다.이것은 Shift, Esc, delete와 같은 수정자 및 인쇄되지 않은 키가 키를 누르지 않고 트리거 키를 누르지 않는 경우를 제외하고 키를 누르지 않는 경우를 제외하면 키를 누름 이벤트와 유사합니다.플랫폼과 브라우저에 따라 두 이벤트 간에 다른 차이가 발생할 수 있습니다.

즉, 화살표의 경우 키 누름을 사용할 수 없습니다.

$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}

언급URL : https://stackoverflow.com/questions/19347269/jquery-keypress-arrow-keys

반응형