Geändertes Eingabetextfeld erkennen

289

Ich habe mir zahlreiche andere Fragen angesehen und sehr einfache Antworten gefunden, einschließlich des folgenden Codes. Ich möchte nur erkennen, wenn jemand den Inhalt eines Textfelds ändert, aber aus irgendeinem Grund funktioniert es nicht ... Ich erhalte keine Konsolenfehler. Wenn ich bei der change()Funktion einen Haltepunkt im Browser setze, wird dieser nie erreicht.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});
<input id="inputDatabaseName">
Des Teufels Anwalt
quelle
1
Nur ein paar Dinge, die Sie ausprobieren sollten: Geben Sie der Eingabe den Typ = "text" und machen Sie sie zu einem Singleton-Element. <input id = "inputDatabaseName" type = "text" />
szeliga
Unnötigen Code bereinigt, nur 7 Jahre zu spät.
Devil's Advocate

Antworten:

523

Sie können das inputJavascript-Ereignis in jQuery folgendermaßen verwenden:

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

In reinem JavaScript:

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

Oder so:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
Ouadie
quelle
1
Ich kann anscheinend keine Dokumentation für dieses Ereignis finden, aber es funktioniert genau so, wie ich es erwartet habe. Irgendeine Idee, wo ich die Dokumentseite finden kann?
Jorge Pedret
3
Sie finden es in der Liste der HTML5-Ereignisse: w3schools.com/tags/ref_eventattributes.asp oder hier help.dottoro.com/ljhxklln.php
Ouadie
7
Diese Lösung ist tatsächlich weitaus besser als die Verwendung von Keyup. Beispielsweise lässt IE den Benutzer das Eingabefeld löschen, indem er auf ein X klickt, das keine Eingabe auslöst.
Georg
7
Bisher engste Lösung, funktioniert jedoch immer noch nicht, wenn der Browser das automatische Ausfüllen der Textfelder durchführt.
Saumil
3
Dies ist weitaus besser als die erste Antwort. Strg, Umschalttasten zählen alle als Tastendruck. Und das Schlimmste ist, wenn Sie schnell tippen, werden mehrere Eingaben als nur ein Keyup-Ereignis registriert.
Oktref
173

Versuchen Sie Keyup statt Änderung.

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

Hier ist die offizielle jQuery-Dokumentation für .keyup () .

Scott Harwell
quelle
1
Seufz, ich schwöre, ich habe das versucht (nachdem ich mir diese Frage angesehen habe: stackoverflow.com/questions/1443292/… ) ... aber anscheinend nicht, weil es jetzt funktioniert!
Devil's Advocate
27
change wird nur ausgelöst, wenn das Element den Fokus verliert, und die Taste wird ausgelöst, wenn eine Taste auf der Tastatur losgelassen wird.
Declan Cook
9
Was passiert, wenn der Benutzer Code mit Strg + V einfügt oder einen ausgewählten Text mit der Maus auf den #inputDatabaseName zieht? Wie erkennt man das?
Radu Simionescu
5
Das Hauptproblem dabei ist, dass immer noch nicht berücksichtigt wird, ob sich der Inhalt tatsächlich ändert. Nur dass ein Knopf gedrückt wurde
Metropolis
@ Metropolis, hast du meine Antwort gesehen? stackoverflow.com/a/23266812/3160597
azerafati
103

In jeder Antwort fehlen einige Punkte. Hier ist meine Lösung:

$("#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>

Die in Chrome und Firefox getesteten AuslöserInput Event für Tastatureingabe , Ziehen mit der Maus , automatisches Ausfüllen und Kopieren und Einfügen wurden getestet. Wenn Sie nach dem vorherigen Wert suchen, werden echte Änderungen erkannt. Dies bedeutet, dass beim Einfügen des gleichen Objekts oder beim Eingeben des gleichen Zeichens usw. nicht ausgelöst wird.

Arbeitsbeispiel: http://jsfiddle.net/g6pcp/473/


aktualisieren:

Wenn Sie Ihre Funktion change function nur ausführen möchten , wenn der Benutzer die Eingabe beendet hat, und verhindern möchten, dass die Änderungsaktion mehrmals ausgelöst wird, können Sie Folgendes versuchen:

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

Wenn der Benutzer mit der Eingabe beginnt (z. B. "foobar"), verhindert dieser Code, dass Sie change actionfür jeden Buchstaben ausgeführt werden, den der Benutzer eingibt, und wird nur ausgeführt, wenn der Benutzer die Eingabe beendet. Dies gilt insbesondere dann, wenn Sie die Eingabe an den Server senden (z. B. Sucheingaben) Wege - Server hat nur eine Suche nach foobarund nicht sechs sucht fund dann found dann foound foobund so weiter.

Azerafati
quelle
1
Dies war der erste, der ab ungefähr 6 arbeitete. Genial. Vielen Dank.
Enkode
Funktioniert fast auf IE9: Wenn Sie ein Zeichen löschen, wird das Ereignis nicht ausgelöst. Sehr gute
Soma
@Soma, wie andere sagen "IE zu brechen ist kein Fehler, es ist eine Funktion";) Obwohl IE nicht mehr fortgesetzt wird, aber wenn Sie eine Lösung dafür haben, lassen Sie es uns wissen
azerafati
Ich weiß, aber ich musste es für die Arbeit tun :( Tatsächlich tue ich: Verwenden $("#input").focusout(function () {}). Wenn Sie außerhalb Ihrer Eingabe klicken, wird das Ereignis ausgelöst. Funktioniert mit der aktuellen Version von Chrome und Firefox sowie IE9
Soma
2
@ Soma, wenn das der einzige Weg für IE ist, um zu arbeiten, könnten Sie es auf meine Weise verwenden, $("#input").on("input focusout",function(e){
indem
18

Texteingaben lösen das changeEreignis erst aus, wenn sie den Fokus verlieren. Klicken Sie außerhalb der Eingabe und die Warnung wird angezeigt.

Wenn der Rückruf ausgelöst werden soll, bevor die Texteingabe den Fokus verliert, verwenden Sie das .keyup()Ereignis.

Matt Ball
quelle
changearbeitet hier: jsfiddle.net/g6pcp ; keyupAlarm nach jedem Schlüssel, was kein guter Weg ist
diEcho
1
@diEcho Ich denke, die Warnung ist nur ein Beispiel, um seinen Code zum Laufen zu bringen ... nicht das, was er am Ende vorhat.
Scott Harwell
@diEcho Was Scott sagte, war nur zu Testzwecken. So debugge ich: D
Devil's Advocate
@Scott bitte bitte bitte benutze lieber einen richtigen Debugger als alert(). Es wird das Debuggen so viel einfacher machen.
Matt Ball
13

onkeyup, onpaste, onchange, oninputscheint fehlzuschlagen, wenn der Browser das automatische Ausfüllen der Textfelder durchführt. Um einen solchen Fall zu behandeln, autocomplete='off'fügen Sie " " in Ihr Textfeld ein, um zu verhindern, dass der Browser das Textfeld automatisch ausfüllt.

Z.B,

<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>
Saumil
quelle
3

In meinem Fall hatte ich ein Textfeld, das an einen Datepicker angehängt war. Die einzige Lösung, die für mich funktioniert hat, war, sie innerhalb des onSelect-Ereignisses des Datepickers zu behandeln.

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

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

Ich denke, Sie können auch verwenden 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;
  }
});
Yoosaf Abdulla
quelle
-5

ARBEITEN:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});
Guaroa Mendez
quelle
Das sieht aus wie Code für eine andere Frage ... Worum geht es bei der Großschreibung von Werten und dem Ein- / Ausblenden von Inhalten?
Nico Haase