У меня есть функция, которая запускается событием onkeydown
текстовое окно. Как узнать, нажал ли пользователь клавишу возврата или клавишу del?
Как захватить backspace в событии onkeydown
Ответы (5)
Попробуй это:
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;
}
}
В настоящее время код для этого должен выглядеть примерно так:
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()
в обработчике события нажатия клавиши предотвратит эффекты нажатия клавиши по умолчанию. При нажатии символа это предотвращает его ввод в активное текстовое поле. При нажатии клавиши Backspace или удаления в текстовом поле предотвращается удаление символа. При нажатии клавиши Backspace без активного текстового поля в браузере, таком как Chrome, где Backspace возвращает вас на предыдущую страницу, это предотвращает такое поведение (пока вы перехватываете событие, добавляя прослушиватель событий вdocument
вместо текстового поля).Документацию о том, как определяется значение атрибута
keyCode
, можно найти в разделе B.2.1 Как чтобы определитьkeyCode
для событийkeydown
иkeyup
в Спецификации событий пользовательского интерфейса W3. В частности, коды для Backspace и Delete перечислены в B.2.3 Фиксированные коды виртуальных клавиш< /эм>а>.В настоящее время предпринимаются попытки отказаться от атрибута
.keyCode
в пользу.key
и.code
. W3 описывает свойство.keyCode
как "legacy", а MDN как "устарело".Одним из преимуществ перехода на
.key
и.code
является более мощная и удобная для программиста обработка ключей, отличных от ASCII, — см. спецификация, в которой перечислены все возможные значения клавиш, которые представляют собой удобочитаемые строки, такие как"Backspace"
и"Delete"
, и включают значения для всего, от клавиш-модификаторов, специфичных для японских клавиатур, до скрытых мультимедийных клавиш. Другим, очень важным для этого вопроса, является различие между значением измененного нажатия клавиши и физической клавишей, которая была нажата.На маленьких клавиатурах Mac нет клавиши Delete, есть только Backspace ключ. Однако нажатие Fn+Backspace эквивалентно нажатию Delete на обычной клавиатуре, то есть удаляет символ после em> текстовый курсор вместо того, что был перед ним. В зависимости от вашего варианта использования, в коде вы можете захотеть обрабатывать нажатие 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'); } });
event.key === Backspace или Удалить
Более новый и более чистый: используйте event.key
. Больше никаких произвольных числовых кодов!
input.addEventListener('keydown', function(event) {
const key = event.key; // const {key} = event; ES6+
if (key === "Backspace" || key === "Delete") {
return false;
}
});
event.preventDefault();
вместо return false
, так как ваш пример не встроенный...
- person Brett Zamir; 05.06.2018
В вашей функции проверьте код клавиши 8 (возврат) или 46 (удалить)
Информация о ключевом коде
Список кодов клавиш
не уверен, работает ли он вне 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
или определите их как постоянные (для лучшей читабельности)