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


289

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

1
juste quelques choses à essayer: donnez à l'entrée un type = "text" et faites-en un élément singleton. <input id = "inputDatabaseName" type = "text" />
szeliga

Nettoyé du code inutile, seulement 7 ans trop tard.
Devil's Advocate

Réponses:


523

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();"/>

1
Impossible de trouver de la documentation pour cet événement, mais cela fonctionne exactement comme je m'y attendais. Une idée où je peux trouver la page doc?
Jorge Pedret

3
Vous pouvez le trouver sur la liste des événements HTML5: w3schools.com/tags/ref_eventattributes.asp ou ici help.dottoro.com/ljhxklln.php
Ouadie

7
Cette solution est en fait bien meilleure que l'utilisation de keyup. Par exemple, IE permet à l'utilisateur d'effacer le champ de saisie en cliquant sur un X qui ne déclenche pas la saisie.
Georg

7
La solution la plus proche jusqu'à présent, mais ne fonctionne toujours pas lorsque le navigateur effectue le remplissage automatique sur les zones de texte.
Saumil

3
C'est bien mieux que la première réponse. Les touches Ctrl et Maj comptent toutes comme des touches. Et le pire est que si vous tapez rapidement, plusieurs entrées seraient enregistrées comme un seul événement de frappe.
octref

173

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 () .


1
soupir je jure que j'ai essayé ça (après avoir regardé cette question: stackoverflow.com/questions/1443292/… ) ... mais apparemment pas parce que ça marche maintenant!
Devil's Advocate

27
change ne se déclenche que lorsque l'élément perd le focus et que la frappe est déclenchée lorsqu'une touche du clavier est relâchée.
Declan Cook

9
que faire si l'utilisateur colle du code en utilisant ctrl + v ou en faisant glisser un texte sélectionné avec la souris sur le #inputDatabaseName? Comment le détectez-vous?
Radu Simionescu

5
Le principal problème est qu'il ne prend toujours pas en compte si le contenu change réellement. Seulement qu'un bouton a été enfoncé
Metropolis

@Metropolis, vous avez vu ma réponse ?? stackoverflow.com/a/23266812/3160597
azerafati

103

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.


1
Ce fut le premier à travailler à partir d'environ 6 ans. Impressionnant. Merci.
Enkode

Fonctionne presque sur IE9: si vous supprimez un personnage, il ne déclenche pas l'événement. Très bonne solution de contournement
Soma

@Soma, comme d'autres le disent "briser IE n'est pas un défaut c'est une fonctionnalité";) bien qu'IE ne soit plus poursuivi mais si vous avez un correctif pour cela, faites-le nous savoir
azerafati

Je sais, mais je devais le faire pour le travail :( En fait, je fais: utiliser $("#input").focusout(function () {}). Lorsque vous cliquez en dehors de votre entrée, l'événement est déclenché. Fonctionne sur la version actuelle de Chrome et Firefox, et IE9
Soma

2
@Soma, si c'est la seule façon pour IE de fonctionner, vous pouvez l'utiliser à ma façon en ne changeant que cette ligne$("#input").on("input focusout",function(e){
azerafati

18

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.


changetravaille ici: jsfiddle.net/g6pcp ; keyupalerte après chaque touche, ce qui n'est pas un bon moyen
diEcho

1
@diEcho Je pense que l'alerte n'est qu'un exemple pour faire fonctionner son code ... pas ce qu'il a l'intention de faire à la fin.
Scott Harwell

@diEcho Ce que Scott a dit, c'était juste à des fins de test. Voilà comment je débogue: D
Devil's Advocate

@Scott s'il vous plaît s'il vous plaît s'il vous plaît utiliser un débogueur approprié plutôt que alert(). Cela rendra le débogage beaucoup plus facile.
Matt Ball

13

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>

3

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
     }
});

0

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;
  }
});

-5

TRAVAIL:

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

Cela ressemble à du code pour une question différente ... de quoi s'agit-il à propos de la mise en majuscule des valeurs et de l'affichage / masquage du contenu?
Nico Haase
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.