Слушатель 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
Поддерживаемые браузеры