jQuery를 사용하여 이스케이프 키의 키 코드

두 가지 기능이 있습니다. enter를 누르면 기능이 올바르게 실행되지만 escape를 누르면 작동하지 않습니다. 이스케이프 키의 올바른 숫자는 무엇입니까?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

키업 이벤트를 사용해보십시오 .

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});

함수에서 키 코드 값을 하드 코딩하는 대신 명명 된 상수를 사용하여 의미를보다 잘 전달하는 것이 좋습니다.

var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ENTER) $('.save').click();
  if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});

FireFox와 같은 일부 브라우저는 다른 브라우저를 모르 KeyEvent더라도 이러한 유형의 상수를 노출 하는 전역 객체를 정의 합니다. 이 SO 질문 은 다른 브라우저에서도 해당 객체를 정의하는 좋은 방법을 보여줍니다.

( 이전 의견 에서 추출 된 답변 )

keyup대신 사용해야 keypress합니다. 예 :

$(document).keyup(function(e) {
  if (e.which == 13) $('.save').click();     // enter
  if (e.which == 27) $('.cancel').click();   // esc
});

keypress브라우저간에 일관되게 처리되지 않는 것 같습니다 ( IE 대 Chrome 대 Firefox의 http://api.jquery.com/keypress 데모를 사용해보십시오 . 때로는 keypress등록되지 않음 및 'which'및 ' keyCode '는 다름) keyup일관성이 있습니다.

e.whichvs에 대한 논의가 있기 때문에 e.keyCode: e.whichjquery-normalized 값이며 사용을 권장합니다.

event.which 속성은 event.keyCode 및 event.charCode를 정규화합니다. 키보드 키 입력을위한 이벤트를 시청하는 것이 좋습니다.

( http://api.jquery.com/event.which/에서 )

키의 키 코드를 찾으려면 다음과 같은 간단한 기능을 사용하십시오.

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}

27이스케이프 키의 코드입니다. :)

최선의 방법은

$(document).keyup(function(e) { 
    if (e.which === 13) $('.save').click();   // enter 
    if (e.which === 27) $('.cancel').click(); // esc   

    /* OPTIONAL: Only if you want other elements to ignore event */
    e.preventDefault();
    e.stopPropagation();
});

요약

• whichkeyCode정규화 된 것보다 더 바람직합니다
• keyup 보다 바람직하다 keydown사용자가 계속 누르고 있으면 키 다운이 여러 번 발생할 수 있기 때문에 합니다.
• keypress실제 문자를 캡처 하지 않는 한 사용 하지 마십시오 .

흥미롭게도 부트 스트랩은 드롭 다운 구성 요소에서 키 다운과 키 코드를 사용합니다 (3.0.2 현재)! 나는 그것이 아마도 좋지 않은 선택이라고 생각합니다.

JQuery 문서의 관련 스 니펫

브라우저는 서로 다른 속성을 사용하여이 정보를 저장하지만 jQuery는 .which 속성을 정규화하여 키 코드를 검색하는 데 안정적으로 사용할 수 있습니다. 이 코드는 화살표와 같은 특수 키 코드를 포함하여 키보드의 키에 해당합니다. 실제 텍스트 입력을 잡으려면 .keypress ()가 더 나은 선택 일 수 있습니다.

관심있는 다른 항목 : JavaScript Keypress Library

jEscape 플러그인을 사용해보십시오 ( Google 드라이브에서 다운로드 )

$(document).escape(function() { 
   alert('ESC button pressed'); 
});

크로스 브라우저를위한 키 코드를 얻거나

var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');

아마도 당신은 스위치를 사용할 수 있습니다

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}

코드가 정상적으로 작동합니다. 초점이 맞지 않은 창일 가능성이 높습니다. 비슷한 기능을 사용하여 iframe 상자 등을 닫습니다.

$(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

});

$(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
      parent.document.getElementById('iframediv').style.display='none';
      parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

});

나는 똑같은 일을하려고하고 있었고 그것은 나에게 쓰레기를 버리고 있었다. 파이어 폭스에서는 이스케이프 키를 눌렀을 때 어떤 일을하려고하면 이스케이프 키를 계속 처리 한 다음 수행하려는 모든 작업을 취소합니다. 경고가 잘 작동합니다. 그러나 제 경우에는 효과가 없었던 역사로 돌아가고 싶었습니다. 마지막으로 아래 그림과 같이 이벤트 전파를 중지해야한다는 것을 알았습니다 ...

if (keyCode == 27)
{
    history.back();

    if (window.event)
    {
        // IE works fine anyways so this isn't really needed
        e.cancelBubble = true;
        e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
        // In firefox, this is what keeps the escape key from canceling the history.back()
        e.stopPropagation();
        e.preventDefault();
    }

    return (false);
}

다른 답변이없는 곳을 설명하기 위해; 문제는 당신의 사용입니다keypress .

아마도 이벤트의 이름은 잘못 지정되었지만 keypresswhen가 발생하도록 정의되었을 수 있습니다. 즉 텍스트입니다. 당신이 원하는 것은 /입니다 .when an actualcharacteris being inserted
keydownkeyupthe user depresses akey 합니다. 즉, 키보드에있는 것들입니다.

차이점 esc은 제어 문자 (문자 그대로 '비 인쇄 문자')이므로 텍스트를 쓰지 않으므로 실행조차하지 않기 때문에 여기에 나타납니다 keypress.
enter제어 문자 (예 : UI 제어)로 사용하더라도 여전히 개행 문자를 삽입하여 실행됩니다 keypress.

출처 : quirksmode

모든 문자에 대한 16 진 코드를 얻으려면 http://asciitable.com/

e.keyCodeMDN에서 DEPRECATED로 간주 되는 것보다 업데이트 된 답변을 게시하기 만하면됩니다 .

오히려 e.key모든 것을 위해 깨끗한 이름을 지원 하는 대신 선택해야 합니다. 관련 사본 파스타는 다음과 같습니다.

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

키보드 입력 및 입력 된 키 조합을 캡처하기위한 강력한 Javascript 라이브러리 종속성이 없습니다.

http://jaywcjlove.github.io/hotkeys/

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

: 단축키는 다음과 같은 수식을 이해하고 ⇧, shiftoption⌥altctrlcontrolcommand하고 ⌘.

다음 특수 키는 바로 가기를 사용할 수 있습니다 : backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete과 f1를 통해 f19.

나는 항상 키 업과 e. 이스케이프 키를 잡기 위해 사용했습니다.

나는이 질문이 jquery에 대해 묻는다는 것을 알고 있지만 jqueryui를 사용하는 사람들에게는 많은 키 코드에 대한 상수가 있습니다.

$.ui.keyCode.ESCAPE

http://api.jqueryui.com/jQuery.ui.keyCode/