programing

자바스크립트 청취자, "키 누름"은 백스페이스를 감지하지 못합니까?

testmans 2023. 10. 27. 21:48
반응형

자바스크립트 청취자, "키 누름"은 백스페이스를 감지하지 못합니까?

저는 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

반응형