it-swarm.com.de

jQuery-Textfeldänderungsereignis wird erst ausgelöst, wenn das Textfeld den Fokus verliert?

Ich habe festgestellt, dass das jQuery-Änderungsereignis für ein Textfeld erst ausgelöst wird, wenn ich außerhalb des Textfelds klicke.

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

Siehe Demo auf JSFiddle

Für meine Anwendung muss das Ereignis bei jeder Zeichenänderung im Textfeld ausgelöst werden. Ich habe sogar versucht, keyup stattdessen zu verwenden.

$("#textbox").keyup(function() {alert("Keyup detected!");});

... aber es ist bekannt, dass das Keyup-Ereignis beim Klicken mit der rechten Maustaste nicht ausgelöst wird.

Irgendwelche Problemumgehung? Haben beide Zuhörer Probleme?

122
SNag

Die Bindung an beide Ereignisse ist der typische Weg. Sie können auch an das Einfügeereignis binden.

Sie können wie folgt an mehrere Ereignisse binden:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

Wenn Sie pedantisch darüber sein wollten, sollten Sie auch an mouseup binden, um Text zu verschieben, und fügen Sie eine Variable lastValue hinzu, um sicherzustellen, dass sich der Text tatsächlich geändert hat: 

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

Und wenn Sie super duper pedantisch sein wollen, sollten Sie einen Intervall-Timer verwenden, um automatische Füllungen, Plugins usw. zu ermöglichen:

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);
280
Petah

In modernen Browsern können Sie das input-Ereignis verwenden:

DEMO

$("#textbox").on('input',function() {alert("Change detected!");});
80
A. Wolff
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>
4
Milan
$(this).bind('input propertychange', function() {
        //your code here
    });

Dies ist zum Tippen, Einfügen, Rechtsklick mit der Maus, Einfügen usw. geeignet.

3
Tony Dong

Versuche dies:

$("#textbox").bind('paste',function() {alert("Change detected!");});

Siehe Demo auf JSFiddle .

2
Dhaval Marthak

Das Lesen Ihrer Kommentare brachte mich zu einer schmutzigen Lösung. Ich weiß, das ist kein richtiger Weg, kann aber eine Umgehung sein.

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});

Probieren Sie den folgenden Code aus:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});
0
Venkat.R