194

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

4

14 に答える 14

270

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

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

（ドキュメントを参照してください。）

これはとても便利なので、答えに入れる価値があります。現在（v1.8 *？）jqueryには.input（）コンビニエンスfnがないので、それを行う方法は次のとおりです。

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
于 2012-09-27T00:29:16.087 に答える
238

使用できます.change()

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

ただし、このイベントはセレクターがフォーカスを失った場合にのみ発生するため、これを機能させるには別の場所をクリックする必要があります。

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

于 2009-09-18T08:48:32.303 に答える
86

以下のような keyup イベントを使用することをお勧めします。

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

同じ結果を得るにはいくつかの方法があるので、好みの問題であり、正確にどのように機能させたいかによって異なります。

更新: これは、コピー アンド ペーストではなく、手動入力でのみ機能します。

コピー アンド ペーストについては、次のことをお勧めします。

$('elementName').on('input',function(e){
 // Code here
});
于 2009-09-18T09:08:16.717 に答える
33

私が使用するコードは次のとおりです。

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

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

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

これは、特にコントロールと組み合わせると、非常にうまく機能しjqGridます。テキストボックスに入力するだけで、すぐに結果をjqGrid.

于 2014-08-29T09:23:38.607 に答える
27

これを行うための信頼できる方法は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。

于 2013-07-02T15:02:51.323 に答える
5

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

脚本：

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

HTML、

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

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

于 2015-06-18T08:07:14.017 に答える
3 
$("input").keyup(function () {
    alert("Changed!");
});
于 2012-06-13T19:08:37.267 に答える
2 
$("input").change(function () {
    alert("Changed!");
});
于 2009-09-18T08:49:36.297 に答える
0

を使用できます.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.");
});

私はアンディに完全に同意します。すべては、どのように機能させたいかによって異なります。

于 2012-02-19T00:25:01.317 に答える