페이지에 입력 요소를 배치하지 않고 키 누름을 캡처 하시겠습니까?

페이지에 입력 요소를 배치하지 않고 키 누름을 캡처 하시겠습니까?

---

JavaScript에서 페이지에 입력 요소를 배치하지 않고 Ctrl + Z와 같은 키 누름을 캡처하는 방법은 무엇입니까? IE에서 keypress 및 keyup 이벤트는 입력 요소 (입력 상자, 텍스트 영역 등)에만 바인딩 될 수 있습니다.

---

jQuery는 또한 매우 사용하기 쉬운 뛰어난 구현을 가지고 있습니다. 이 기능을 여러 브라우저에서 구현하는 방법은 다음과 같습니다.

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

IE7, Firefox 3.6.3 및 Chrome 4.1.249.1064에서 테스트되었습니다.

이를 수행하는 또 다른 방법은 keydown 이벤트를 사용하고 event.keyCode를 추적하는 것입니다. 그러나 jQuery는 event.which를 사용하여 keyCode 및 charCode를 정규화하므로 다양한 상황에서 event.which 사용을 권장합니다.

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});

---

브라우저에서 일부 작업을 트리거 할 수있는 Ctrl-z, Ctrl-x, Ctrl-c와 같은 단축키 및 화살표 키와 같은 인쇄 할 수없는 키 (예 : 편집 가능한 문서 또는 요소 내부)의 경우 키를 누르지 못할 수 있습니다. 모든 브라우저에서 이벤트. 이러한 이유로 keydown브라우저의 기본 동작을 억제하려는 경우 대신 사용해야 합니다. 그렇지 않다면 keyup똑같이 할 것입니다.

모든 주요 브라우저에서 작동 하는 keydown이벤트 첨부 document:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

완전한 참조를 위해 JavaScript 키 처리에 대한 Jan Wolter의 기사를 강력히 권장 합니다.

---

키 조합을 포함한 키 누름 감지 :

window.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.keyCode == 90) {
    // Ctrl + z pressed
  }
});

여기에 혜택이되는 것입니다 하지 덮어 전역 속성을 대신 단지 부작용을 소개합니다. 좋지는 않지만 여기에 다른 제안보다 훨씬 덜 사악합니다.

---

최신 JS의 경우 event.key!

document.addEventListener("keypress", function onPress(event) {
    if (event.key === "z" && event.ctrlKey) {
        // Do something awesome
    }
});

Mozilla 문서

지원되는 브라우저

---

코딩 및 Ctrl + z 감지

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}

---

document.onkeydown = keyDown;

document.onkeypress = keyPress;

기타

IE에서 나를 위해 작동

참고 URL : https://stackoverflow.com/questions/2878983/capture-key-press-without-placing-an-input-element-on-the-page