Слушатель JavaScript, "keypress" не обнаруживает backspace?

Я использую прослушиватель keypress, например..

addEventListener("keypress", function(event){

}

однако, похоже, это не обнаруживает обратное пространство, которое стирает текст. Есть ли другой прослушиватель, который я могу использовать для его обнаружения?

Ответ 1

Событие KeyPress вызывается только для символов (печатаемых), событие KeyDown для всех, включая nonprintable, таких как Control, Shift, Alt, BackSpace и т.д.

ОБНОВЛЕНИЕ:

Событие нажатия клавиши запускается, когда клавиша нажата и эта клавиша обычно генерирует значение символа

Ссылка.

Ответ 2

Попробуйте keydown вместо keypress.

События клавиатуры происходят в следующем порядке: keydown, keyup, keypress

Проблема с backspace, вероятно, заключается в том, что браузер вернется на keyup, и поэтому ваша страница не увидит событие keypress.

Ответ 3

Событие keypress может отличаться в разных браузерах.

Я создал Jsfiddle, чтобы сравнить события клавиатуры (с помощью ярлыков JQuery) в Chrome и Firefox. В зависимости от браузера, с которым вы используете событие keypress, будет запущено или нет - backspace запустит keydown/keypress/keyup в Firefox, но только keydown/keyup в Chrome.

События с одним событием keyclick

в Chrome

  • keydown/keypress/keyup, когда браузер регистрирует ввод с клавиатуры (keypress)

  • keydown/keyup, если нет ввода клавиатуры (проверено с помощью alt, shift, backspace, клавиш со стрелками)

  • keydown только для вкладки?

в Firefox

  • keydown/keypress/keyup, когда браузер регистрирует ввод с клавиатуры, а также для обратного пространства, клавиши со стрелками, вкладку (так что здесь keypress запускается даже без ввода)

  • keydown/keyup для alt, shift


Это не должно удивлять, потому что согласно https://api.jquery.com/keypress/:

Примечание: поскольку событие 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>

Ответ 4

Что-то я написал, если кто-то сталкивается с проблемой, когда люди нажимают backspace, думая, что они находятся в поле формы.

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

Ответ 5

Мое числовое управление:

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 key code - 8

Ответ 6

event.key === "Backspace"

Более свежий и намного более чистый: используйте event.key. Нет никаких произвольных номеров!

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

Документы Mozilla

Поддерживаемые браузеры