jQuery textbox changeイベントは、textboxがフォーカスを失うまで発生しませんか?


133

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

HTML:

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

JS:

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

参照してくださいJSFiddleでデモ

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

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

...しかし、キーアップイベントが右クリックアンドペーストで発生しないことは既知の事実です。

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


^^これ。イベントハンドラはいくつでも持つことができます。
モニカチェリオを2013年

回答:


298

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

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

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

9
最後に誰かが質問を読んですべてに答えました!
モニカチェリオを2013年

4
.on('change keyup paste', function() {...}実際に複数回発砲!文字を入力してから外側をクリックすると、「変更」イベントと「キーアップ」イベントの両方が発生し、関数が複数回実行されます。右クリックで貼り付けてから外側をクリックすると、「変更」と「貼り付け」の両方が起動されます。ヘック!Ctrl + Vを使用して貼り付け、外側をクリックすると、3回発火します!!
SNag 2013年

1
@SNagはい、同様に、lastValue変数を使用してチェックを追加して、実際に変更されたことを確認する必要があります。
Petah 2013年

1
+1。しかし、ここでも「変更」への拘束力は必要ですか?それが(変更)の起動時にまだ処理されていなかったであろうどのケースを処理するかは、私には明確ではありません。
Madbreaks 2013

1
テキストが実際に貼り付けられる前に、pasteイベントが発生します
developerbmw

85

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

デモ

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

1
いいですね-私はそれを知りませんでした。それはHTML5のものですか?
モニカチェリオを2013年

4
私はこの答えを受け入れたかったのですが、あなたが言ったように、これは最新のブラウザのためのソリューションです。私のWebアプリケーションは、まだIE8を使用しているユーザーをターゲットにしていますが、これはIE8では機能しません。:(何と言えばいいですか.. :(
SNag

たとえば、すべてのテキストを選択してDeleteキーを押した場合は
起動

4
$(this).bind('input propertychange', function() {
        //your code here
    });

これは、タイピング、貼り付け、右クリックマウス貼り付けなどに使用できます。


1
これは、数値フィールドの上矢印を押すなどの操作を行っても複数のイベントが発生しないため、最良の解決策のようです。
ジャスティン

シンプルで効率的なソリューション
Abdulhameed

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

2

これを試して:

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

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


質問は貼り付けなので機能しません。イベントは右クリックアンドペーストでは発生しません。
Dhaval Marthak 2013年

そしてそれは何を使って何をしているのbind()ですか?
モニカチェリオを2013年

彼は、keyUpイベントを右クリック+がそれに貼り付けると、そう解雇されていない彼と言われkeyupchange()、彼はその後、イベントを実行したいのidので、自分の典型的な行動を持っているpasteオプションであるかもしれない
Dhaval Marthak

もちろん、それでも、のbind代わりにを使用する理由はまだわかりませんon
モニカチェリオを2013年

0

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

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

質問で述べたように、マウスでの貼り付けをどのようにキャプチャしますか?
モニカチェリオを2013年

キープレスは彼が言ったので適切ですevent to be fired on every character change in the textbox
Venkat.R

あなたがすべての質問を読んだとしたら、彼がまた言ったことを見るでしょう"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
モニカ・チェリオを復活させる'26

0

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

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.