Détecter la modification d'une zone de saisie de texte

Question

J'ai examiné de nombreuses autres questions et trouvé des réponses très simples, notamment le code ci-dessous. Je veux simplement détecter lorsque quelqu'un modifie le contenu d'une zone de texte, mais pour une raison quelconque, cela ne fonctionne pas... Je n'obtiens aucune erreur de console. Lorsque je place un point d'arrêt dans le navigateur à l'emplacement change() fonction qu'il n'atteint jamais.

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

<input id="inputDatabaseName">

Answer 1

Vous pouvez utiliser le input Événement Javascript dans jQuery comme ceci :

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

En pur JavaScript :

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

Ou comme ça :

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

Answer 2

Essayez keyup au lieu de change.

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

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

Answer 3

Chaque réponse manque certains points, alors voici 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 site Input Event incendies sur Clavier l'entrée, Déplacement de la souris , Remplissage automatique et Copier-coller testé sur Chrome et Firefox. La vérification de la valeur précédente lui permet de détecter les changements réels, ce qui signifie qu'il ne se déclenche pas en collant la même chose ou en tapant le même caractère, etc.

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

---

mettre à jour :

Et si vous aimez diriger votre change function uniquement lorsque l'utilisateur a fini de taper et éviter de déclencher plusieurs fois l'action de modification, 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 s'exécute pour chaque lettre tapée par l'utilisateur et ne s'exécute que lorsque l'utilisateur cesse de taper, ce qui est particulièrement utile lorsque vous envoyez l'entrée au serveur (par exemple, les entrées de recherche), de cette façon le serveur fait seulement un recherche de foobar et pas six recherches pour f et ensuite fo et ensuite foo et foob et ainsi de suite.

Answer 4

Les entrées de texte ne déclenchent pas la change jusqu'à ce qu'ils perdent le focus. Cliquez en dehors de l'entrée et l'alerte s'affichera.

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

Answer 5

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

Eg,

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