Come acquisire un backspace nell'evento onkeydown

Question

Ho una funzione attivata dall'evento onkeydown di una casella di testo. Come posso sapere se l'utente ha premuto il tasto Backspace o il tasto Canc?

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

Nella funzione effettua il codice chiave 8 (backspace) o 46 (cancella)

Keycode information
Keycode list

Answer 3

non è sicuro se funziona al di fuori di firefox :

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

Answer 4

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

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 sono ampiamente supportati nei browser, è possibile utilizzare gli attributi .key o .code dello KeyboardEvent anziché lo .keyCode deprecato.

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 carattere, questo impedisce di essere digitato nel campo di testo attivo. Quando si preme backspace o cancella in un campo di testo, impedisce l'eliminazione di un personaggio. Quando si preme backspace senza un campo di testo attivo, in un browser come Chrome in cui backspace riporta alla pagina precedente, impedisce tale comportamento (a condizione che si acceda all'evento aggiungendo il listener di eventi a document invece di un campo di testo).

• La documentazione su come viene determinato il valore dell'attributo keyCode è disponibile nella sezione B.2.1 How to determine keyCode for keydown and keyup events nella specifica degli eventi UI del W3. In particolare, i codici per Backspace e Elimina sono elencati in B.2.3 Fixed virtual key codes.

• È in corso uno sforzo per deprecare l'attributo .keyCode in favore di .key and .code. Il W3 descrive la proprietà .keyCode come "legacy" e MDN come "deprecated".

  Uno dei vantaggi del passaggio al .key e .code sta avendo più potente e programmatore-friendly la gestione delle chiavi non ASCII - vedi the specification that lists all the possible key values, che sono stringhe leggibili come "Backspace" e "Delete" e comprendono i valori per tutto, dai tasti modificatori specifici alle tastiere giapponesi per oscurare i tasti multimediali. Un altro, che è molto rilevante per questa domanda, è distinguere tra il significato di una pressione di tasto modificata e il tasto fisico che è stato premuto.

  Su small Mac keyboards, non v'è alcuna Eliminare chiave, solo chiave Backspace. Tuttavia, premendo Fn + Backspace equivale a premere Eliminare su una tastiera normale - cioè, cancella il carattere che dopo il cursore di testo al posto di quella precedente. A seconda del caso d'uso, nel codice potresti voler gestire una stampa di Backspace con Fn tenuto premuto come Backspace o Elimina. Ecco perché il nuovo modello di chiave ti consente di scegliere.

  L'attributo .key ti da senso della pressione dei tasti, in modo Fn + Backspace produrrà la stringa "Delete". L'attributo .code fornisce la chiave fisica, quindi Fn + Backspace restituirà comunque la stringa "Backspace".

  Sfortunatamente, al momento di scrivere questa risposta, sono solo supported in 18% of browsers, quindi se hai bisogno di un'ampia compatibilità sei bloccato con l'attributo "legacy" .keyCode 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 5

evento .key === "Backspace" o "Elimina"

Più recente e molto più pulito: utilizzare event.key. Niente più codici di numeri arbitrari!

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

Mozilla Docs

Supported Browsers