javascript - jqueryは、ユーザー入力に基づいていないテキストボックス値の変更を検出します

Question

ページに単純なテキスト ボックスとボタンがあるとします。ボタンをクリックすると、テキストボックスの値が更新されます。

HTML:

<input type="text" id="myText" val="" />
<input type="button" id="myBtn" value="Change TextBox Value" />

jQuery:

$("#myBtn").on('click', function() {
   $("#myText").val('adsf');
})

次のように、テキスト ボックスの変更イベントのイベント リスナーを追加したいと思います。

$('#myText').on('change', function(){
    alert('Changed!')
});

ボタンをクリックしてもそのアラートはトリガーされませんが、テキストボックスの値を手動で変更してフォーカスを外すとトリガーされます。

ボタンの onclick イベントに追加できることはわかっていますが$("#myText").trigger('change')、テキスト ボックスにイベント リスナーを追加することによってのみこれを実現したいと考えています。

jsfiddle

ありがとう

Answer 1

そのようなイベントはサポートされていません。試すことができる唯一のことは、値が変更されたかどうかを確認するために間隔またはタイムアウトを設定することです（データを使用して一時的な値を保存します）：

var $myText = $("#myText");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
        val = $myText.val();

    if (data !== val) {
        $myText.data("value", val);
        alert("changed");
    }
}, 100);

デモ: http://jsfiddle.net/xZcAr/1/

Answer 2

関数を使用するだけですkeyup：

$( "#myText").keyup(function(){
   alert($(this).val());
});

Answer 3

両方のハンドラーを接続する必要があります。ハンドラーを再利用するには、名前付き関数に抽出できます。

function showChanged(){
    alert('Changed!')
}

$("#myBtn").on('click', showChanged);
$("#myText").on('change', showChanged);