Как захватить 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');
        }
    });
    

Ответ 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

Поддерживаемые браузеры