Как захватить backspace на OnKeyDown события

У меня есть функция, которая вызывается командой onkeydown событие текстового поля. Как я могу определить, нажал ли пользователь клавишу backspace или клавишу del?

50
javascript 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;
   }
}
81

в настоящее время код для этого должен выглядеть примерно так:

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 или delete в текстовом поле он предотвращает удаление символа. При нажатии backspace без активного текстового поля в браузере, таком как Chrome, где backspace возвращает вас на предыдущую страницу, это предотвращает такое поведение (если вы поймаете событие, добавив прослушиватель событий в document вместо текста поле.)

  • документация о том, как значение keyCode атрибут определяется можно найти в разделе B. 2.1 Как определить keyCode на keydown и keyup событий в спецификации событий пользовательского интерфейса W3. В частности, коды Backspace и Delete перечислены в B. 2.3 исправлены виртуальные коды ключей.

  • предпринимается попытка осудить

16

в вашей функции проверьте код ключа 8 (backspace) или 46 (delete)

Keycode информация
список код

6

событие.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 Docs

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

5

не уверен, что он работает за пределами 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 или определите их как константу (для лучшей читаемости)

0