У меня есть функция, которая запускается при событии onkeydown
текстового поля. Как я могу узнать, ударил ли пользователь либо ключ возврата, либо ключ del?
Как захватить backspace в событии onkeydown
Ответ 1
Попробуйте следующее:
document.addEventListener("keydown", KeyCheck); //or however you are calling your method
function KeyCheck(event)
{
var KeyID = event.keyCode;
switch(KeyID)
{
case 8:
alert("backspace");
break;
case 46:
alert("delete");
break;
default:
break;
}
}
Ответ 2
В настоящее время код для этого должен выглядеть примерно так:
document.getElementById('foo').addEventListener('keydown', function (event) {
if (event.keyCode == 8) {
console.log('BACKSPACE was pressed');
// Call event.preventDefault() to stop the character before the cursor
// from being deleted. Remove this line if you don't want to do that.
event.preventDefault();
}
if (event.keyCode == 46) {
console.log('DELETE was pressed');
// Call event.preventDefault() to stop the character after the cursor
// from being deleted. Remove this line if you don't want to do that.
event.preventDefault();
}
});
хотя в будущем, когда они будут широко поддерживаться в браузерах, вы можете использовать .key
или .code
атрибуты KeyboardEvent
вместо устаревшего .keyCode
.
Подробности, которые стоит знать:
-
Вызов
event.preventDefault()
в обработчике события keydown будет предотвращать эффекты нажатия клавиш. При нажатии символа это не позволяет ввести его в активное текстовое поле. При нажатии на обратное или удаление в текстовом поле это предотвращает удаление символа. При нажатии backspace без активного текстового поля в браузере, таком как Chrome, где backspace возвращает вас на предыдущую страницу, он предотвращает это поведение (до тех пор, пока вы поймаете событие, добавив слушателя событий вdocument
вместо текстового поля). -
Документация о том, как определяется значение атрибута
keyCode
, можно найти в разделе B.2.1. Как определитьkeyCode
дляkeydown
иkeyup
события в спецификации W3 UI Events. В частности, коды Backspace и Delete перечислены в B.2.3 Исправлены коды виртуальных клавиш. -
Выполняется попытка отклонить атрибут
.keyCode
в пользу.key
и.code
. W3 описывает свойство.keyCode
как "legacy" , а MDN - как "устарело" .Одним из преимуществ изменения
.key
и.code
является более мощная и удобная в программировании обработка ключей, отличных от ASCII, - см. спецификацию, в которой перечислены все возможные ключи значения, которые являются удобочитаемыми для человека строками типа"Backspace"
и"Delete"
, и включают значения для всего: от клавиш-модификаторов, специфичных для японских клавиатур, для скрытия медиа-ключей. Другой, который очень важен для этого вопроса, заключается в различии между значением модифицированного нажатия клавиши и нажатием физического ключа.В маленьких клавиатурах Mac нет клавиши Delete, только Backspace. Однако нажатие Fn + Backspace эквивалентно нажатию Delete на обычной клавиатуре, т.е. Он удаляет символ после текстового курсора, а не перед ним. В зависимости от вашего варианта использования, в коде, вы можете обрабатывать нажатие Backspace с Fn нажатой как Backspace или Delete. Вот почему новая ключевая модель позволяет вам выбирать.
Атрибут
.key
дает вам значение нажатия клавиши, поэтому Fn + Backspace будет выдавать строку"Delete"
. Атрибут.code
предоставляет физический ключ, поэтому Fn + Backspace по-прежнему выдаст строку"Backspace"
.К сожалению, с момента написания этого ответа они поддерживаются только в в 18% браузеров, поэтому, если вам нужна широкая совместимость, вы застряли в "наследии"
.keyCode
. Но если вы читатель из будущего, или если вы ориентируетесь на определенную платформу и знаете, что поддерживает новый интерфейс, тогда вы можете написать код, который выглядит примерно так:document.getElementById('foo').addEventListener('keydown', function (event) { if (event.code == 'Delete') { console.log('The physical key pressed was the DELETE key'); } if (event.code == 'Backspace') { console.log('The physical key pressed was the BACKSPACE key'); } if (event.key == 'Delete') { console.log('The keypress meant the same as pressing DELETE'); // This can happen for one of two reasons: // 1. The user pressed the DELETE key // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where // FN+BACKSPACE deletes the character in front of the text cursor, // instead of the one behind it. } if (event.key == 'Backspace') { console.log('The keypress meant the same as pressing BACKSPACE'); } });
Ответ 3
В вашей функции проверьте код 8 (обратное пространство) или 46 (удалить)
Ответ 4
не уверен, что он работает вне firefox:
callback (event){
if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
// do something
}
}
если нет, замените event.DOM_VK_BACK_SPACE
на 8
и event.DOM_VK_DELETE
на 46
или определите их как константные (для лучшей читаемости)
Ответ 5
event.key === "Backspace" или "Delete"
Более свежий и намного более чистый: используйте event.key
. Нет никаких произвольных номеров!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});