Détecter la zone de texte d'entrée modifiée

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

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

<input id="inputDatabaseName">

Vous pouvez utiliser l' 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();"/>

essayez la saisie au lieu de changer.

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

Voici la documentation jQuery officielle pour .keyup () .

Il manque quelques points à chaque réponse, 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>

Les Input Eventincendies sur l' entrée clavier , la souris glisser , le remplissage automatique et le copier-coller testés sur Chrome et Firefox. La vérification de la valeur précédente permet de détecter de vrais changements, ce qui signifie ne pas tirer en collant la même chose ou en tapant le même caractère ou etc.

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

mettre à jour:

Et si vous souhaitez exécuter votre change function uniquement lorsque l'utilisateur a fini de taper et éviter de déclencher l'action de modification plusieurs fois, 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 vous empêche change actiond'exécuter pour chaque type d'utilisateur de lettre et ne s'exécute que lorsque l'utilisateur arrête de taper. serveur manière ne une seule recherche foobaret non six recherches pour fet puis foet puis fooet foobet ainsi de suite.

Les entrées de texte ne déclenchent pas l' changeévénement tant qu'elles ne perdent pas le focus. Cliquez en dehors de l'entrée et l'alerte s'affichera.

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

onkeyup, onpaste, onchange, oninputsemble échouer lorsque le navigateur effectue le remplissage automatique sur les zones de texte. Pour gérer 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>

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

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

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

Je pense que vous pouvez keydownaussi utiliser :

$('#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;
  }
});

TRAVAIL:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});