it-swarm.com.de

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 in der Funktion change() einen Haltepunkt im Browser setze, wird dieser nie erreicht.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});
<input id="inputDatabaseName">
268
Scott Beeson

Sie können das input Javascript-Ereignis in jQuery wie folgt 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();"/>
485
Ouadie

versuchen Sie keyup anstelle von change.

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

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

171
Scott Harwell

Da jeder Antwort einige Punkte fehlen, ist hier 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>

Der Input Event wird bei Tastatureingabe , Ziehen mit der Maus ausgelöst. AutoFill und Kopieren-Einfügen getestet auf Chrome und Firefox. Wenn Sie nach dem vorherigen Wert suchen, werden reale Änderungen erkannt. Dies bedeutet, dass beim Einfügen desselben Objekts oder beim Eingeben desselben Zeichens usw. kein Auslösen erfolgt.

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


Update:

Und wenn Sie Ihren change function nur ausführen möchten, wenn der Benutzer die Eingabe beendet und die Änderungsaktion nicht mehrmals ausgelöst hat, 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 Ihr change action für jeden Buchstabentyp ausgeführt wird, und wird nur ausgeführt, wenn der Benutzer mit der Eingabe aufhört Sucheingaben), auf diese Weise sucht der Server nur einmal nach foobar und nicht sechsmal nach f und dann fo und dann foo und foob und so weiter.

99
azerafati

Texteingaben lösen das Ereignis change 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 Ereignis .keyup() .

16
Matt Ball

onkeyup, onpaste, onchange, oninput scheint fehlzuschlagen, wenn der Browser die Textfelder automatisch ausfüllt. Um einen solchen Fall zu behandeln, geben Sie "autocomplete='off'" 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>
13
Saumil

In meinem Fall hatte ich ein Textfeld, das an einen Datumsmesser 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
     }
});
3
kmxr

Ich denke, Sie können keydown auch verwenden:

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