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

$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
    return false;
}
});

Answer 2

Sur les appareils Android utilisant chrome, nous ne pouvons pas détecter un retour arrière. Vous pouvez utiliser une solution de contournement pour cela :

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })

Answer 3

InputEvent.inputType peut être utilisé pour la détection du retour en arrière Docs Mozilla . Il fonctionne sur Chrome desktop, Chrome Android et Safari iOS.

<input type="text" id="test" />

<script>  
  document.getElementById("test").addEventListener('input', (event) => {
  console.log(event.inputType);
  // Typing of any character event.inputType = 'insertText'
  // Backspace button event.inputType = 'deleteContentBackward'
  // Delete button event.inputType = 'deleteContentForward'
  })
</script>

Answer 4

//Here's one example, not sure what your application is but here is a relevant and likely application 
function addDashesOnKeyUp()
{
    var tb = document.getElementById("tb1"); 
    var key = event.which || event.keyCode || event.charCode;

    if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) ) 
    {
        tb.value += "-"
    } 
}

Answer 5

Démonstration en direct

Javascript
<br>
<input id="input">
<br>
or
<br>
jquery
<br>
<input id="inpu">

<script type="text/javascript">
var myinput = document.getElementById('input');
input.onkeydown = function() {
  if (event.keyCode == 8) {
    alert('you pressed backspace');
    //event.preventDefault(); remove // to prevent backspace
  }

  if (event.keyCode == 46) {
    alert('you pressed delete');
    //event.preventDefault(); remove // to prevent delete
  }
};

//jquery code

$('#inpu').on('keydown', function(e) {
  if (event.which == 8) {
    alert('you pressed backspace');
    //event.preventDefault(); remove // to prevent backspace
  }

  if (event.which == 46) {
    alert('you pressed delete');
    //event.preventDefault(); remove // to prevent delete
  }
});
</script>