Как захватить backspace в событии onkeydown
У меня есть функция, которая запускается при событии onkeydown
текстового поля. Как я могу узнать, ударил ли пользователь либо ключ возврата, либо ключ del?
Ответы
Ответ 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;
}
});
Документы Mozilla
Поддерживаемые браузеры