web-dev-qa-db-ja.com

jQueryを使って<input type = "text">の変更を実装するにはどうすればいいですか？

<select>はこのAPIを持っています。 <input>はどうですか？

jqueryinputonchange
161
omg

.change() が使えます

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

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

それがあなたにとって完全ではないならば、あなたは keyup 、 keydown のような他の jQueryイベント のいくつかを使うことができます。 ）または キーを押す - 必要なエフェクトによって異なります。

203
Greg

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

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

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

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

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

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

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

同じ結果を得るにはいくつかの方法があるので、私はそれが好みにかかっていると思い、あなたがそれを正確にどのように機能させたいかに依存します。

更新：これはコピー＆ペーストではなく手動入力に対してのみ機能します。

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

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

これが私が使うコードです：

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

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

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

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

27
Mike Gledhill

これを行うにはたった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でバインド/バインド解除できます。

22
David Hellsing
<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キーワードを使用することをお勧めします。そうすれば、あなたはこの要素で必要なことをすべて実行できます。

5
Developer

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

スクリプト：

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

HTML、

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

私はこのワーキングコードが動的に/ Ajax呼び出しにアクセスしようとしている人に役立つことを願っています...

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

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

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

これは私のために働きました。名前がfieldAのフィールドがクリックされた場合、またはキーが入力された場合は、idfieldBのフィールドが更新されます。

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

あなたはさまざまな方法でこれを行うことができます、keyupはそれらのうちの1つです。しかし、私は変更を加えながら以下の例を挙げています。

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

注意：input [name = "vat_id"]あなたの入力に置き換えてくださいIDまたは名前。

1
Rokan Nashp
$("input").change(function () {
    alert("Changed!");
});
1
Georg Schölly

あなたは .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.");
});

私は完全にAndyに同意します。すべてはあなたがそれを機能させたい方法に依存します。

1
kcho0