Alle Änderungen an einem <input type="text"> (sofort) mit JQuery erkennen

Question

Es gibt viele Möglichkeiten, den Wert eines <input type="text"> ändern können, einschließlich:

• Tastendrucke
• Kopieren/Einfügen
• geändert mit JavaScript
• vom Browser oder einer Symbolleiste automatisch vervollständigt

Ich möchte, dass meine JavaScript-Funktion jedes Mal aufgerufen wird (mit dem aktuellen Eingabewert), wenn sich dieser ändert. Und ich möchte, dass sie sofort aufgerufen wird, nicht erst, wenn die Eingabe den Fokus verliert.

Ich bin auf der Suche nach dem saubersten und robustesten Weg, dies über alle Browser hinweg zu tun (vorzugsweise mit jQuery).

Answer 1

Leider gibt es kein Ereignis oder eine Reihe von Ereignissen, die Ihren Kriterien entsprechen. Tastendruck und Kopieren/Einfügen können beide mit dem keyup Ereignis. Änderungen durch JS sind schwieriger. Wenn Sie die Kontrolle über den Code haben, der das Textfeld festlegt, ist es am besten, ihn so zu ändern, dass er entweder Ihre Funktion direkt aufruft oder ein Benutzerereignis für das Textfeld auslöst:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Wenn Sie keine Kontrolle über diesen Code haben, können Sie setInterval() um das Textfeld auf Änderungen zu 'überwachen':

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Diese Art der aktiven Überwachung erfasst Aktualisierungen zwar nicht "sofort", aber sie scheint schnell genug zu sein, so dass es keine spürbare Verzögerung gibt. Wie DrLouie in den Kommentaren anmerkte, ist diese Lösung wahrscheinlich nicht gut skalierbar, wenn Sie viele Eingaben überwachen müssen. Sie können den 2. Parameter immer auf setInterval() mehr oder weniger häufig zu überprüfen.

Answer 2

Hier ist eine Lösung, die nicht die Verwendung von jQuery (seine wirklich ziemlich veraltet und nicht notwendig in diesen Tagen)

Verwendung des Ereignisses "input" können Sie nach jeder Art von Veränderung suchen:

Löschen, Zurücksetzen, Einfügen, Eingeben, alles, was den Eingabewert ändert.

En input Ereignis steht in direktem Zusammenhang mit der Texteingabe. Jedes Mal, wenn der Text auf irgendeine Weise geändert wird, input versandt wird.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
    var a = document.getElementById('output');
    a.innerText += "Detected an Update!\n";
}

<input id="testInput">
<br>
<a id="output"></a>

Answer 3

Hier ist eine etwas andere Lösung, falls Ihnen keine der anderen Antworten zusagt:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

Bedenken Sie, dass Sie sich nicht auf Klick und Tastendruck verlassen können, um das Kontextmenü einzufügen.

Answer 4

Fügen Sie diesen Code irgendwo ein, dann klappt's.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

Diese Lösung finden Sie unter val() löst nicht change() in jQuery aus

Answer 5

Obwohl diese Frage schon vor 10 Jahren gestellt wurde, bin ich der Meinung, dass sie immer noch verbessert werden muss. Hier ist also meine Lösung.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

Das einzige Problem bei dieser Lösung ist, dass sie nicht ausgelöst wird, wenn sich der Wert durch Javascript ändert, wie $('selector').val('some value') . Sie können jedes Ereignis zu Ihrem Selektor auslösen, wenn Sie den Wert von Javascript ändern.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

Oder in einer einzigen Zeile

$(selector).val('some value').trigger('change');