web-dev-qa-db-ja.com

テキストボックスがフォーカスを失うまでjQueryのテキストボックスの変更イベントは発生しません？

テキストボックスのjQuery changeイベントは、テキストボックスの外側をクリックするまで発生しないことがわかりました。

HTML：

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

JS：

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

JSFiddleのデモ を参照してください。

私のアプリケーションでは、テキストボックス内の文字が変更されるたびにイベントを発生させる必要があります。代わりにkeyupを使ってみました...

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

...しかし、keyupイベントが右クリックして貼り付けられても発生しないことは知られています。

回避策はありますか？両方のリスナーがあると問題が発生しますか？

jqueryeventstextbox
124
SNag

両方のイベントにバインドするのが典型的な方法です。貼り付けイベントにバインドすることもできます。

このように複数のイベントにバインドできます。

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

あなたがそれについて勉強したいのであれば、あなたもテキストをドラッグすることに応えるためにmouseupにバインドし、テキストが実際に変わったことを保証するためにlastValue変数を追加するべきです：

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

そしてもしあなたがsuper duperのペダントになりたいのなら、あなたは自動充填、プラグインなどを満たすためにインターバルタイマーを使うべきです：

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);
285
Petah

最近のブラウザでは、 inputイベント を使用できます。

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

これは、入力、貼り付け、マウスの右クリックなどで機能します。

3
Tony Dong

これを試して：

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

JSFiddleのデモ を参照してください。

2
Dhaval Marthak

あなたのコメントを読むことは私を汚い修正に連れて行った。これは正しい方法ではありません、私は知っていますが、回避策になる可能性があります。

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

以下のコードを試してください。

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