JavaScript 리스너, "keypress"가 백 스페이스를 감지하지 못합니까?


141

keypress예를 들어 리스너를 사용하고 있습니다 .

addEventListener("keypress", function(event){

}

그러나 이것은 텍스트를 지우는 백 스페이스를 감지하지 못하는 것 같습니다 ...

이것을 감지하는 데 사용할 수있는 다른 리스너가 있습니까?

답변:


167

KeyPress 이벤트는 문자 만 호출 (인쇄) 키,에서 KeyDown 이벤트가 모두 포함하여 인쇄 할 수없는 등의 위해 발생 Control, Shift, Alt, BackSpace, 등

최신 정보:

키 누름 이벤트는 키를 눌렀을 때 발생하며 해당 키는 일반적으로 문자 값을 생성합니다

참조 .


3
엄격하게 사실이 아님 : keypress많은 브라우저에서 인쇄 할 수없는 많은 키가 이벤트를 발생 시킵니다. 참조 unixpapa.com/js/key.html
팀 다운을

현재 Mozilla 버전에서는 키 누르기 이벤트에서 백 스페이스와 모두가 감지됩니다.
iniravpatel

70

keydown대신 사용해보십시오 keypress.

키보드 이벤트 keydownkeyup,,keypress

백 스페이스의 문제점은 브라우저가 다시 탐색 keyup하여 페이지에 keypress이벤트 가 표시되지 않는다는 것 입니다.


표준을 살펴 보지 않았지만 이벤트 순서는 (Firefox 37 이상) 인 것 같습니다 keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett

또한 입력의 주요 이벤트의 keyup경우 이벤트가 시작될 때까지 문자가 필드에 나타나지 않는 것 같습니다 .
jxmallett

마지막 하나-iOS (8.2)에서 백 스페이스 키는 keydown이벤트 만 발생 하지만 그 이후로 문자가 입력에서 제거되지 않습니다.
jxmallett

이것이 답입니다. 이것은 키 누름 삭제 및 Ctrl + V 키 누름을 캡처합니다.
user1709076

30

keypress이벤트는 브라우저에서 다를 수 있습니다.

Chrome과 Firefox에서 키보드 이벤트 (JQuery 단축키 사용)를 비교하기 위해 Jsfiddle 을 만들었습니다 . 사용중인 브라우저에 따라 keypress이벤트가 트리거되거나 트리거되지 않습니다. 백 스페이스는 keydown/keypress/keyupFirefox에서 트리거 되지만 keydown/keyupChrome 에서만 트리거 됩니다 .

단일 키 클릭 이벤트 트리거

Chrome에서

  • keydown/keypress/keyup브라우저가 키보드 입력을 등록 할 때 ( keypress발생)

  • keydown/keyup 키보드 입력이없는 경우 (alt, shift, backspace, 화살표 키로 테스트)

  • keydown 탭만?

Firefox에서

  • keydown/keypress/keyup브라우저가 키보드 입력을 등록 할 때뿐만 아니라 백 스페이스, 화살표 키, 탭에도 등록 할 때 (입력 keypress이 없어도 여기에서 시작 됩니다)

  • keydown/keyup 대체, 교대


https://api.jquery.com/keypress/ 에 따르면 이것은 놀라운 일이 아닙니다 .

참고 : 키 누르기 이벤트에는 공식 사양이 적용되지 않으므로 사용시 발생하는 실제 동작은 브라우저, 브라우저 버전 및 플랫폼에 따라 다를 수 있습니다.

키 누르기 이벤트 유형의 사용은 W3C에서 더 이상 사용되지 않습니다 ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

키 누르기 이벤트 유형은 참조 및 완전성을 위해이 스펙에 정의되어 있지만이 스펙은이 이벤트 유형의 사용을 권장하지 않습니다. 컨텍스트를 편집 할 때 작성자는 대신 사전 입력 이벤트를 구독 할 수 있습니다.


마지막으로 질문에 대답하려면 keyup또는keydown Firefox와 Chrome에서 백 스페이스를 감지 .


여기에서 사용해보십시오.

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>


1
멋진 답변-대부분 브라우저에서 백 스페이스를 처리하는 다양한 방법에 대한 설명
Jivan

2
W3School은 이미 완료되었습니다 : w3schools.com/jsref/…
Tân

1
코드 조각은 매우 도움이되었다
존 길 메르

17

사람들이 양식 필드에 있다고 생각하면서 백 스페이스를 치는 사람들과 문제가 발생하는 경우를 대비하여 내가 쓴 것

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

8

내 숫자 컨트롤 :

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

시도 해봐

백 스페이스 키 코드는 8


6

event.key === "백 스페이스"

가장 최근의 클리너 :을 사용하십시오 event.key. 더 이상 임의의 숫자 코드가 없습니다!

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

모질라 문서

지원되는 브라우저


1
2018 년에 이것이 가장 좋은 방법입니다!
tfantina 2016 년

나는 함께 일하는 모든 단일 언어의 백 스페이스에 키 코드 8을 사용했습니다. ASCII 코드를 배우십시오. 임의적이지는 않습니다.
André Werlang

3
그냥 당신이 있기 때문에 더 나은 옵션이없는 것을 의미하지 않는다 사용하고있다. .key현재 문서에서 권장하는 옵션입니다. 또한 특정 키에 대해 다른 매핑을 사용하여 다양한 국제 키보드를 지원합니다. 그것들은 고정되어 있다는 의미에서 임의적 이지는 않지만 코드를 읽을 때입니다
Gibolt

2

대신 keyup / keydown / beforeinput 이벤트 중 하나를 사용하십시오.

참조를 기반으로 keypress는 더 이상 사용되지 않으며 더 이상 권장되지 않습니다.

문자 값을 생성하는 키를 누르면 키 누르기 이벤트가 시작됩니다. 문자 값을 생성하는 키의 예는 알파벳, 숫자 및 문장 부호 키입니다. 문자 값을 생성하지 않는 키의 예로는 Alt, Shift, Ctrl 또는 Meta와 같은 수정 자 키가 있습니다.

"beforeinput"을 사용하는 경우 브라우저 호환성에 주의하십시오 . "beforeinput"과 다른 두 가지의 차이점은 입력 값이 변경 되려고 할 때 "beforeinput"이 시작된다는 것입니다. 따라서 입력 값을 변경할 수없는 문자는 실행되지 않습니다 (예 : shift, ctr, alt).

나는 같은 문제가 있었고 키 업을 사용하여 해결되었습니다.

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