Слушатель JavaScript, нажатие клавиши не обнаруживает обратного пробела?


144

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

addEventListener("keypress", function(event){

}

Однако это, похоже, не обнаруживает обратного пространства, которое стирает текст ...

Могу ли я использовать другой слушатель для обнаружения этого?

Ответы:


170

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

ОБНОВИТЬ:

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

Ссылка .


3
Не совсем верно: многие непечатаемые клавиши запускают keypressсобытия во многих браузерах. См. Unixpapa.com/js/key.html
Тим Даун,

В текущей версии Mozilla в событии нажатия клавиши обнаруживается возврат и все остальное.
Иниравпатель

72

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

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

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


Я не изучал стандарты, но порядок событий (по крайней мере, в Firefox 37) кажется таким keydown keypress keyup. unixpapa.com/js/testkey.html
jxmallett

Также кажется, что для ключевых событий во входных данных символ не отображается в поле до тех пор, пока keyupсобытие не будет запущено.
jxmallett

Последний - в iOS (8.2) клавиша Backspace только запускает keydownсобытие, но символ не удаляется из ввода до некоторого времени после этого.
jxmallett

это ответ. это фиксирует нажатие клавиши удаления и нажатия клавиш Ctrl + V
user1709076,

30

В keypressразных браузерах событие может быть разным.

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

Событие одиночного нажатия клавиши инициировано

в 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/ :

Примечание: поскольку событие нажатия клавиши не покрывается какой-либо официальной спецификацией, фактическое поведение, возникающее при его использовании, может отличаться в зависимости от браузеров, версий браузеров и платформ.

Использование типа события нажатия клавиши не рекомендуется W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

Тип события нажатия клавиши определен в этой спецификации для справки и полноты, но эта спецификация не рекомендует использование этого типа события. При редактировании контекстов авторы вместо этого могут подписаться на событие beforeinput.


Наконец, чтобы ответить на ваш вопрос, вы должны использовать 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>


1
Замечательный ответ - в основном для объяснения различных способов обработки обратного пространства в браузерах
Дживан

2
W3School уже сделала это: w3schools.com/jsref/…
Тан,

1
Фрагмент кода был очень полезен
Джон Гилмер

18

Что-то, что я написал на случай, если кто-то столкнется с проблемой, когда люди нажимают 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');
    }
});

8

Мой числовой элемент управления:

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


8

event.key === "Backspace"

Более свежие и более чистые: используйте event.key. Больше никаких произвольных цифровых кодов!

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

Документы Mozilla

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


1
В 2018 году это лучший способ добиться этого!
tfantina

Я использовал ключевой код 8 для возврата на каждый язык, с которым работал. Изучите коды ASCII, они не произвольны.
André Werlang

3
Просто потому , что вы уже использовали не означает , что это не лучший вариант. .keyв настоящее время рекомендуется в документации. Кроме того, он поддерживает различные международные клавиатуры с разными сопоставлениями для любой данной клавиши. Они не произвольны в том смысле, что они фиксированы, но они есть при чтении кода
Гибольт

3

Вместо этого используйте одно из событий keyup / keydown / beforeinput.

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

Событие нажатия клавиши запускается, когда нажата клавиша, которая производит символьное значение. Примерами клавиш, которые создают символьное значение, являются буквенные, числовые и знаки препинания. Примеры клавиш, которые не производят символьное значение, - это клавиши-модификаторы, такие как Alt, Shift, Ctrl или Meta.

если вы используете "beforeinput", будьте осторожны с совместимостью с браузером . разница между «beforeinput» и двумя другими состоит в том, что «beforeinput» запускается, когда значение ввода собирается измениться, поэтому с символами, которые не могут изменить входное значение, оно не запускается (например, shift, ctr, alt).

У меня была такая же проблема, и она была решена с помощью клавиатуры.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.