Как захватить backspace в событии onkeydown

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


person Raphael    schedule 01.03.2010    source источник


Ответы (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;
   }
}
person Stephano    schedule 01.03.2010
comment
я не могу сделать это на type=tel или type=password - person George; 29.01.2018
comment
В этом ответе много гадостей о коде: идентификаторы, которые не соответствуют общепринятым соглашениям об именах javascript, создание переменной, которую лучше было бы встроить (IMO), операторы case без отступов. Тем не менее, он отвечает на вопрос... - person Jasper; 29.10.2019
comment
Примечание: event.keyCode устарел; вместо этого рассмотрите event.key. См. здесь: developer.mozilla.org/en-US/docs/Web /API/событие клавиатуры - person Ilya; 29.03.2020

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

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 на обычной клавиатуре, то есть удаляет символ после текстовый курсор вместо того, что был перед ним. В зависимости от вашего варианта использования, в коде вы можете захотеть обрабатывать нажатие 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');
        }
    });
    
person Mark Amery    schedule 28.02.2016
comment
Я удивлен, что webkit так поздно пришел на вечеринку с ключами/кодами. Как обычно, я сначала проверил поддержку IE и был удивлен, что последние версии поддерживают ее, а Chrome до сих пор не поддерживает (май 2016 г.). - person Bram Vanroy; 06.05.2016
comment
Привет из будущего! Отличный ответ! Сейчас мы на 82,25% - person FlippingBinary; 27.09.2018

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;
    }
});

Документы Mozilla

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

person Gibolt    schedule 03.12.2017
comment
Хорошая информация, но вы должны event.preventDefault(); вместо return false, так как ваш пример не встроенный... - person Brett Zamir; 05.06.2018

В вашей функции проверьте код клавиши 8 (возврат) или 46 (удалить)

Информация о ключевом коде
Список кодов клавиш

person jasonbar    schedule 01.03.2010

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

person Mathieu    schedule 01.03.2010