[javascript] JavaScript 리스너, “keypress”가 백 스페이스를 감지하지 못합니까?

Program / 글쓴이

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

addEventListener("keypress", function(event){

}

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

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

답변

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

최신 정보:

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

참조 .

답변

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

키보드 이벤트 keydown는 keyup,,keypress

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

답변

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>

스 니펫 확장

답변

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

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');
    }
});

답변

내 숫자 컨트롤 :

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

답변

event.key === “백 스페이스”

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

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

모질라 문서

지원되는 브라우저

답변

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

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

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

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

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