jQueryで<input type =“ text”>のonchangeを実装するにはどうすればよいですか？

<select>このAPIがあります。どう<input>ですか？

使用できます .change()

$('input[name=myInput]').change(function() { ... });

ただし、このイベントはセレクタがフォーカスを失ったときにのみ発生するため、この作業を行うには別の場所をクリックする必要があります。

それが適切でない場合は、希望する正確な効果に応じて、keyup、keydown、keypressなどの他のjQueryイベントを使用できます。

@pimvdbがコメントで言ったように、

変更は、入力要素がフォーカスを失ったときにのみ発生することに注意してください。テキストボックスがフォーカスを失う必要なしに更新されるたびに発生するinputイベントもあります。キーイベントとは異なり、テキストの貼り付け/ドラッグにも機能します。

（ドキュメントを参照。）

これは非常に便利なので、答えに入れる価値があります。現在（v1.8 *？）jqueryには.input（）便利なfnがないので、それを行う方法は

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

以下のようなキーアップイベントを使用することをお勧めします。

$('elementName').keyup(function() {
 alert("Key up detected");
});

同じ結果を得るにはいくつかの方法がありますので、それは好みによるものであり、正確に機能させる方法に依存すると思います。

更新：これは手動入力でのみ機能し、コピーと貼り付けはできません。

コピーと貼り付けについては、次のことをお勧めします。

$('elementName').on('input',function(e){
 // Code here
});

これが私が使用するコードです：

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

これは、特にjqGridコントロールとペアになっている場合、非常にうまく機能します。テキストボックスに入力するだけで、すぐに結果をで表示できますjqGrid。

これを行う信頼できる方法は1つだけですには、は、間隔で値を取得し、それをキャッシュされた値と比較することです。

これが唯一の方法である理由は、さまざまな入力（キーボード、マウス、貼り付け、ブラウザの履歴、音声入力など）を使用して入力フィールドを変更する方法が複数あり、標準のイベントを使用してすべてをクロスで検出できないためです-ブラウザ環境。

幸い、jQueryのイベントインフラストラクチャのおかげで、独自のinputchangeイベントを簡単に追加できます。ここでそうしました：

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

次のように使用します。 $('input').on('inputchange', function() { console.log(this.value) });

ここにデモがあります：http : //jsfiddle.net/LGAWY/

複数の間隔が怖い場合は、このイベントをfocus/でバインド/バインド解除できますblur。

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

this要素全体にアクセスできるように、キーワードを使用して、この要素で必要なすべてを実行できるようにすることをお勧めします。

以下は、動的/ Ajax呼び出しであっても機能します。

脚本：

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

HTML、

<input class="addressCls" type="text" name="address" value="" required/>

この作業コードが動的/ Ajax呼び出しにアクセスしようとしている人を助けることを願っています...

$("input").keyup(function () {
    alert("Changed!");
});

あなたは単にIDで作業することができます

$("#your_id").on("change",function() {
    alert(this.value);
});

これはさまざまな方法で行うことができますが、キーアップはその1つです。しかし、私は変更時に以下の例を挙げています。

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

注：input [name = "vat_id"]は、入力IDまたは名前に置き換えます。

入力中にイベントをトリガーする場合は、以下を使用します。

$('input[name=myInput]').on('keyup', function() { ... });

入力フィールドを離れたときにイベントをトリガーする場合は、以下を使用します。

$('input[name=myInput]').on('change', function() { ... });

$("input").change(function () {
    alert("Changed!");
});

これでうまくいきました。fieldAという名前のフィールドがクリックされるか、キーが入力されると、フィールドがID fieldBで更新されます。

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

使用できます.keypress()。

たとえば、HTMLについて考えます。

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

イベントハンドラーは入力フィールドにバインドできます。

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

私はアンディに完全に同意します。すべては、それがどのように機能するかによって異なります。