Come catturare un backspace sull'evento onKeyDown

Question

Ho una funzione che viene attivata dal onkeydown caso di una casella di testo. Come faccio a sapere se l'utente ha colpito sia il tasto backspace o il tasto del?

Answer 1

Prova questo:

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

Answer 2

Al giorno d'oggi, il codice per fare questo dovrebbe essere simile a:

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

anche se in futuro, una volta che essi sono ampiamente supportate nei browser, si consiglia di utilizzare il .key o .code attributi del KeyboardEvent al posto del deprecato .keyCode .

Dettagli vale la pena conoscere:

• Calling event.preventDefault() nel gestore di un evento KeyDown impedirà gli effetti di default della pressione di un tasto. Quando si preme un personaggio, questo impedisce di essere digitato nel campo di testo attivo. Quando si preme Backspace o cancellare in un campo di testo, impedisce un personaggio venga eliminato. Quando si preme Backspace senza un campo di testo attivo, in un browser come Chrome dove backspace si torna alla pagina precedente, impedisce che il comportamento (a patto che si cattura l'evento aggiungendo il listener di eventi per document invece di un campo di testo).

• documentazione su come il valore dell'attributo keyCode è determinato possono essere trovate nella sezione < em> B.2.1 Come determinare keyCode per gli eventi keydown e keyup del W3 UI Events Specification. In particolare, i codici per tornare indietro e cancellare sono elencati nella B.2.3 fisso codici chiave virtuali .

• C'è uno sforzo in corso per disapprovare l'attributo .keyCode a favore di .key e .code . Il W3 Descrivi l'immobile .keyCode come "legacy" e MDN come "deprecated ".

  Un vantaggio della modifica .key e .code sta avendo più potente e programmatore-friendly la gestione delle chiavi non ASCII - vedere la precisazione che elenca tutti i possibili valori chiave , che sono stringhe leggibili come "Backspace" e "Delete" e comprendono i valori per tutto da tasti modificatori specifici per tastiere giapponesi a tasti multimediali oscuri. Un altro, che è di grande rilevanza a questa domanda, è distinguendo tra il significato di pressione di un tasto modificato e il tasto fisico che è stato premuto .

  piccolo Mac , non v'è alcuna Elimina tasto , a < chiave kbd> Backspace . Tuttavia, premendo Fn + Backspace equivale a premere Elimina su una tastiera normale - cioè, cancella il carattere dopo il cursore di testo al posto di quella precedente. A seconda del vostro caso d'uso, nel codice si potrebbe desiderare di gestire una pressione di Backspace con Fn premuto sia come Backspace o Canc. Ecco perché il nuovo modello chiave consente di scegliere.

  L'attributo .key la significa della pressione dei tasti dà, quindi Fn + Backspace produrrà il "Delete" stringa. L'attributo .code ti dà la chiave fisica, in modo Fn + Backspace sarà ancora cedere il "Backspace" stringa.

  Purtroppo, al momento di scrivere questa risposta, sono solo supportati nel 18% of browser , quindi se avete bisogno ampia compatibilità sei bloccato con l'attributo .keyCode "legacy" per il momento. Ma se sei un lettore dal futuro, o se ci si rivolge una piattaforma specifica e so che supporta la nuova interfaccia, allora si potrebbe scrivere un codice che sembrava qualcosa di simile:

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

Answer 3

Nella prova di funzionamento per il codice chiave 8 (backspace) o 46 (cancellazione)

informazioni Keycode
lista Keycode

Answer 4

event.key === "Backspace" o "Elimina"

più recente e molto più pulito: utilizzare event.key. Non più arbitraria codici numerici!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

Browser supportati

Answer 5

Non sono sicuro se funziona al di fuori di firefox:

callback (event){
  if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
    // do something
  }
}

In caso contrario, sostituire event.DOM_VK_BACK_SPACE con 8 e event.DOM_VK_DELETE con 46 o definirli come costante (per una migliore leggibilità)