＆lt; input type =＆＃8220; text＆＃8221;＆gt;のonchangeを実装する方法jQueryで？

StackOverflow https://stackoverflow.com/questions/1443292

  •  22-07-2019
  •  | 
  •  

質問

＆lt; select＆gt; にはこのAPIがあります。 ＆lt; input＆gt; はどうですか？

役に立ちましたか？

解決

.change（）

を使用できます。 
$('input[name=myInput]').change(function() { ... });

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

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

他のヒント

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

  

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

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

これは非常に便利であるため、回答する価値があります。現在（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 の結果をすぐに表示できます。

これを行う唯一の信頼できる方法があります。間隔で値を取得し、キャッシュされた値と比較することです。

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

幸い、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 キーワードを使用することをお勧めします。これにより、この要素で必要なすべてのことができるようになります。

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

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

スクリプト：

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

Html、

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

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

単にIDを使用して作業できます

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

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

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

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

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

NB： input [name =＆quot; vat_id＆quot;] を入力 ID または name に置き換えます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top