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

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

---

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 )

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

---

마지막으로, 질문에 대답하려면 Firefox 및 Chrome에서 백 스페이스를 사용 keyup하거나 keydown감지 해야합니다 .

---

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

$(".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 === "백 스페이스"

더 최근의 훨씬 더 깨끗한 : use event.key. 더 이상 임의의 숫자 코드가 없습니다!

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

모질라 문서

지원되는 브라우저

참고 URL : https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace