자바스크립트 청취자, "키 누름"은 백스페이스를 감지하지 못합니까?
저는 A를 사용하고 있습니다.keypress청취자 예..
addEventListener("keypress", function(event){
}
하지만 이것은 텍스트를 지우는 백스페이스를 감지하지 못하는 것 같습니다.
이것을 감지하는 데 사용할 수 있는 다른 청취자가 있습니까?
KeyPress 이벤트는 문자(인쇄 가능) 키에 대해서만 호출되고, KeyDown 이벤트는 , , , 등 인쇄 불가능한 키를 포함한 모든 키에 대해서만 호출됩니다.
업데이트:
키를 누르면 키 누름 이벤트가 발생하고 해당 키가 일반적으로 문자 값을 생성합니다.
참고.
.keydown대신에keypress.
키보드 이벤트는 다음 순서로 발생합니다.keydown,keyup,keypress
백스페이스의 문제는 브라우저가 다시 탐색하는 것일 것입니다.keyup따라서 당신의 페이지는 볼 수 없을 것입니다.keypress이벤트성의
 keypress브라우저마다 이벤트가 다를 수 있습니다.
Chrome과 Firefox의 키보드 이벤트(JQuery 바로가기 사용)를 비교하기 위해 Jsfiddle을 만들었습니다.사용하는 브라우저에 따라keypress이벤트가 트리거되거나 트리거되지 않음 -- 백스페이스가 트리거됩니다.keydown/keypress/keyup파이어폭스에서만keydown/keyup크롬으로
단일 키 클릭 이벤트가 트리거됨
크롬으로
- keydown/keypress/keyup브라우저가 키보드 입력을 등록할 때 (- keypress해고됨)
- keydown/keyup키보드 입력이 없는 경우(Alt, Shift, Backspace, 화살표 키로 tested)
- keydown탭용으로만?
파이어폭스에서
- 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파이어폭스와 크롬에서 백스페이스를 탐지할 수 있습니다.
여기서 한 번 해보세요.
$(".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');
    }
});
event.key === "백스페이스"
보다 최신의 훨씬 깨끗한 제품: 사용event.key. 더 이상 임의의 숫자 코드는 없습니다!
note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});
내 숫자 컨트롤:
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);" />
먹어봐.
BackSpace 키 코드는 8입니다.
대신 입력 이벤트 전에 키 업/키 다운/중 하나를 사용합니다.
이 기준에 따라 키 누르기는 더 이상 권장되지 않습니다.
문자 값을 생성하는 키를 누르면 키 누름 이벤트가 발생합니다.문자 값을 생성하는 키의 예로는 알파벳, 숫자 및 구두점 키가 있습니다.문자 값을 생성하지 않는 키의 예로는 Alt, Shift, Ctrl 또는 Meta와 같은 한정자 키가 있습니다.
입력 전에"를 사용하는 경우 브라우저 호환성에 주의해야 합니다."입력 전"과 다른 두 가지의 차이점은 입력 값이 변경되려고 할 때 "입력 전"이 발화되므로 입력 값을 변경할 수 없는 문자의 경우에는 발화되지 않습니다(예: shift, ctr, alt).
저도 같은 문제가 있었는데 키업으로 해결이 되었습니다.
저는 노력하고 있었습니다.keydown뒷공간은 포착되지 않았습니다전환하기keyup나를 위해 일했습니다.
addEventListener("keyup", function(event){
}
참고로, 누군가와 함께 사용하고 있는 경우..on동적으로 생성된 컨텐츠의 경우.
$("body").on( "keyup", ".my-element", function(evt) {
      // Do something
});
언급URL : https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace
'programing' 카테고리의 다른 글
| 플랫폼별 새 라인에 대한 Node.JS 상수? (0) | 2023.10.27 | 
|---|---|
| 레일 데이터베이스 연결 풀 작동 방식 (0) | 2023.10.27 | 
| 팬더를 사용하여 새 기둥에 증분 숫자를 추가하는 방법 (0) | 2023.10.27 | 
| 동일한 표에 있는 다른 두 열의 연접 관계로 열을 업데이트하는 방법 (0) | 2023.10.27 | 
| jquery datable의 ajax call에서 매개변수를 게시하는 방법 (0) | 2023.10.27 |