Geändertes Eingabetextfeld erkennen

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

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

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

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.

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.

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>

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

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

ARBEITEN:

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