web-dev-qa-db-fra.com

Détecter la zone de saisie saisie modifiée

J'ai examiné de nombreuses autres questions et trouvé des réponses très simples, y compris le code ci-dessous. Je veux simplement détecter quand une personne modifie le contenu d'une zone de texte mais que, pour une raison quelconque, cela ne fonctionne pas ... Je ne reçois aucune erreur de console. Lorsque je définis un point d'arrêt dans le navigateur à la fonction change(), il ne le frappe jamais.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">
jqueryinput
268
Scott Beeson

Vous pouvez utiliser le input Javascript event dans jQuery comme ceci:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

En JavaScript pur:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Ou comme ceci:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
485
Ouadie

essayez keyup au lieu de changer.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Voici la documentation officielle de jQuery pour .keyup () .

171
Scott Harwell

Chaque réponse manque quelques points, voici donc ma solution:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Le Input Event se déclenche à l’entrée du clavier , en faisant glisser la souris , Remplissage automatique et Copier-coller testé sur Chrome et Firefox. Le fait de vérifier la valeur précédente permet de détecter les changements réels, ce qui signifie que vous ne devez pas déclencher lorsque vous collez la même chose, ne tapez pas le même caractère, etc.

Exemple de travail: http://jsfiddle.net/g6pcp/473/

mise à jour:

Et si vous souhaitez exécuter votre change function uniquement lorsque l'utilisateur a fini de taper et empêcher le déclenchement de l'action de modification à plusieurs reprises, vous pouvez essayer ceci:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Si l'utilisateur commence à taper (par exemple, "foobar"), ce code empêche votre change action de s'exécuter pour chaque lettre que l'utilisateur tape et ne fonctionne que lorsque l'utilisateur arrête de taper. recherche entrées), de cette façon le serveur ne recherche qu’un recherche de foobar et non six recherches de f, puis de fo puis foo et foob et ainsi de suite.

99
azerafati

Les entrées de texte ne déclenchent pas l'événement change tant qu'elles n'ont pas perdu la mise au point. Cliquez en dehors de l'entrée et l'alerte s'affichera.

Si le rappel doit se déclencher avant que l'entrée de texte ne perd son focus, utilisez l'événement .keyup() .

16
Matt Ball

onkeyup, onpaste, onchange, oninput semble échouer lorsque le navigateur effectue le remplissage automatique des zones de texte. Pour traiter un tel cas, incluez "autocomplete='off'" dans votre champ de texte pour empêcher le navigateur de remplir automatiquement la zone de texte,

Par exemple,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>
13
Saumil

Dans mon cas, j'avais une zone de texte qui était attachée à un sélecteur de date. La seule solution qui a fonctionné pour moi a été de le gérer dans l'événement onSelect du datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});
3
kmxr

Je pense que vous pouvez aussi utiliser keydown:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});
0
Yoosaf Abdulla