web-dev-qa-db-ja.com

jQueryは入力コンテンツが変更されたかどうかを確認できますか？

Javascript（jQueryが最適）イベントを何らかの形でフォーム入力値を「変更」するようにバインドすることは可能ですか？

.change()メソッドについては知っていますが、ユーザー（カーソル）が入力フィールドを離れるまでトリガーされません。 .keyup()メソッドの使用も検討しましたが、矢印キーなどにも反応します。

私はただアクションをトリガーする必要があります毎回入力のテキストは、それがたった1文字の変更であっても変わります。

javascriptjqueryinputonchange
49
Pavel S.

HTML5 inputイベントという簡単な解決策があります。 <input type="text">要素のすべての主要ブラウザの現在のバージョンでサポートされており、IE <9の簡単な回避策があります。詳細については、以下の回答を参照してください。

例（IE <9：回避策については上記のリンクを参照）を除く）：

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});
75
Tim Down

はい、変更前の値と比較します。

var previousValue = $("#Elm").val();
$("#Elm").keyup(function(e) {
    var currentValue = $(this).val();
    if(currentValue != previousValue) {
         previousValue = currentValue;
         alert("Value changed!");
    }
});

別のオプションは、特定のキーでのみ変更された機能をトリガーすることです。つかいます e.KeyCodeどのキーが押されたかを把握します。

14
alexn
function checkChange($this){
    var value = $this.val();      
    var sv=$this.data("stored");            
        if(value!=sv)
            $this.trigger("simpleChange");    
}

$(document).ready(function(){
    $(this).data("stored",$(this).val());   
        $("input").bind("keyup",function(e){  
        checkChange($(this));
    });        
    $("input").bind("simpleChange",function(e){
        alert("the value is chaneged");
    });        
});

ここにフィドルがあります http://jsfiddle.net/Q9PqT/1/

7
Rafay

データ属性に初期値を保存し、現在の値でテストすることもできます。

<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" /> 

$("#id_someid").keyup(function() {
    return $(this).val() == $(this).data().initial;
});

初期値が変更されていない場合、trueを返します。

6
Kwaw Annor

JQueryでデータの使用を使用し、すべてのイベントをキャッチして、最後の値（テストされていない）に対してテストできます。

_$(document).ready(function() {  
    $("#fieldId").bind("keyup keydown keypress change blur", function() {
        if ($(this).val() != jQuery.data(this, "lastvalue") {
         alert("changed");
        }
        jQuery.data(this, "lastvalue", $(this).val());
    });
});
_

これは、アイテムの長いリストに対してもかなりうまく機能します。 _jQuery.data_を使用すると、値を追跡するためにJavaScript変数を作成する必要がなくなります。 $("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc")を実行して、多くのフィールドを追跡できます。

更新：blurリストにbindを追加しました。

2
jwatts1980

キーとマウスのイベントの組み合わせでイベントを設定し、確認するためにonblurも設定できます。その場合、入力の値を保存します。次の呼び出しで、現在の値と最後に保存された値を比較します。それが実際に変更された場合にのみ、あなたの魔法を行います。

多かれ少なかれクリーンな方法でこれを行うには：

データをDOM要素に関連付けることができます（api.jquery.com/jQuery.dataを参照）。したがって、フォーム内のすべての要素に割り当てられるイベントハンドラーの汎用セットを作成できます。各イベントは、トリガーされた要素を1つの汎用関数に渡すことができます。その1つの関数は、要素のデータに古い値を追加できます。そうすれば、フォーム全体および今後作成するすべてのフォームで機能する汎用コードとしてこれを実装できるはずです。 :)そして、おそらく20行程度のコードしかかからないでしょう。

例はこのフィドルにあります： http://jsfiddle.net/zeEwX/

1
GolezTrol

現場に物を貼り付けるスキャナーにこの種のコードを使わなければなりませんでした

$(document).ready(function() {
  var tId,oldVal;
  $("#fieldId").focus(function() {
     oldVal = $("#fieldId").val();
     tId=setInterval(function() { 
      var newVal = $("#fieldId").val(); 
      if (oldVal!=newVal) oldVal=newVal;
      someaction() },100);
  });
  $("#fieldId").blur(function(){ clearInterval(tId)});
});

未検証...

1
mplungjan

「単純な」解決策があるとは思わない。マウスで変更が行われたときにもキャッチできるように、おそらくイベントonKeyUpとonChangeの両方を使用する必要があります。コードが呼び出されるたびに、フィールドに直接アタッチされたthis.seenValueに「見た」値を保存できます。これにより、少し簡単になります。

1
Sarel Botha

ユーザーはOSメニューに移動し、マウスを使用して貼り付けを選択できるため、これをトリガーする安全なイベントはありません。常に機能することがわかった唯一の方法は、入力値が変更されたかどうかを確認するsetIntervalを設定することです。

var inp = $('#input'),
    val = saved = inp.val(),
    tid = setInterval(function() {
        val = inp.val();
        if ( saved != val ) {
            console.log('#input has changed');
            saved = val;
    },50);

JQueryの特別なイベントを使用してこれを設定することもできます。

0
David Hellsing