Я использую keypress
слушатель, например ..
addEventListener("keypress", function(event){
}
Однако это, похоже, не обнаруживает обратного пространства, которое стирает текст ...
Могу ли я использовать другой слушатель для обнаружения этого?
Ответы:
KeyPress событие вызывается только для символа (версия для печати) ключи, KeyDown события возникают в том числе для всех непечатаемых , таких как Control, Shift, Alt, BackSpaceи т.д.
ОБНОВИТЬ:
Событие нажатия клавиши запускается, когда клавиша нажата, и эта клавиша обычно производит символьное значение
Ссылка .
Попробуйте keydown
вместо keypress
.
События клавиатуры происходят в следующем порядке: keydown
, keyup
,keypress
Проблема с обратным пространством, вероятно, заключается в том, что браузер вернется в исходное состояние, keyup
и ваша страница не увидит это keypress
событие.
keydown
keypress
keyup
. unixpapa.com/js/testkey.html
keyup
событие не будет запущено.
keydown
событие, но символ не удаляется из ввода до некоторого времени после этого.
В 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>
Что-то, что я написал на случай, если кто-то столкнется с проблемой, когда люди нажимают 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');
}
});
Мой числовой элемент управления:
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
Более свежие и более чистые: используйте event.key
. Больше никаких произвольных цифровых кодов!
note.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace") {
// Do something
}
});
.key
в настоящее время рекомендуется в документации. Кроме того, он поддерживает различные международные клавиатуры с разными сопоставлениями для любой данной клавиши. Они не произвольны в том смысле, что они фиксированы, но они есть при чтении кода
Вместо этого используйте одно из событий keyup / keydown / beforeinput.
исходя из этой ссылки, нажатие клавиш устарело и больше не рекомендуется.
Событие нажатия клавиши запускается, когда нажата клавиша, которая производит символьное значение. Примерами клавиш, которые создают символьное значение, являются буквенные, числовые и знаки препинания. Примеры клавиш, которые не производят символьное значение, - это клавиши-модификаторы, такие как Alt, Shift, Ctrl или Meta.
если вы используете "beforeinput", будьте осторожны с совместимостью с браузером . разница между «beforeinput» и двумя другими состоит в том, что «beforeinput» запускается, когда значение ввода собирается измениться, поэтому с символами, которые не могут изменить входное значение, оно не запускается (например, shift, ctr, alt).
У меня была такая же проблема, и она была решена с помощью клавиатуры.
keypress
события во многих браузерах. См. Unixpapa.com/js/key.html