Détecter le backspace et del sur l'événement "input" ?

Question

Comment faire ?

J'ai essayé :

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

mais ça ne marche pas...

Si je fais la même chose sur l'événement keypress, cela fonctionne, mais je ne veux pas utiliser keypress parce que cela produit le caractère tapé dans mon champ de saisie. Je dois être en mesure de contrôler cela

---

mon code :

  $('#content').bind('input', function(event){

    var text = $(this).val(),
        key = event.which || event.keyCode || event.charCode;

    if(key == 8){
      // here I want to ignore backspace and del
    }

    // here I'm doing my stuff
    var new_text = 'bla bla'+text;
    $(this).val(new_text);
  });

aucun caractère ne devrait être ajouté à mon entrée, en dehors de ce que j'ajoute avec val() en fait, l'entrée de l'utilisateur devrait être complètement ignorée, seule l'action d'appuyer sur la touche est importante pour moi

Answer 1

Avec jQuery

El événement.qui normalise event.keyCode et event.charCode. Il est recommandé de surveiller event.which pour la saisie des touches du clavier.

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});

Answer 2

Event.key === "Backspace" (retour arrière)

Plus récent et beaucoup plus propre : utiliser event.key . Plus de codes numériques arbitraires !

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

Docs Mozilla

Navigateurs pris en charge

Answer 3

C'est une vieille question, mais si vous voulez attraper un événement de retour arrière sur l'entrée, et non pas une touche vers le bas, une touche vers le haut ou une touche vers le bas - car j'ai remarqué que n'importe laquelle de ces fonctions interrompt certaines fonctions que j'ai écrites et provoque des retards gênants dans le formatage automatique du texte - vous pouvez attraper un retour arrière en utilisant inputType :

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});

Answer 4

keydown con event.key === "Backspace" or "Delete"

Plus récent et beaucoup plus propre : utiliser event.key . Plus de codes numériques arbitraires !

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

Style moderne :

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Docs Mozilla

Navigateurs pris en charge

Answer 5

Avez-vous essayé d'utiliser 'onkeydown' ? C'est l'événement que vous recherchez.

Il intervient avant l'insertion de l'entrée et permet d'annuler l'entrée de l'image.