5

これは単純なことのように思えますが、グーグルは私のために何も見つけていません：

フォーカスを取得する入力を除いて、テキスト/値の変更イベントのみにバインドするにはどうすればよいですか？つまり、次のようになります。

$(function(){
  $('input#target').on('keyup', function(){
    alert('Typed something in the input.');
  });
});

...アラートは、ユーザーが実際にテキストを入力したかどうかに関係なく、ユーザーが要素をタブインおよびタブアウトしたときにトリガーされます。ユーザーがテキストフィールドにテキストを入力/変更しない限り、イベントをトリガーせずにフォームをキーボードでナビゲートできるようにするにはどうすればよいですか？

注：スクリプトの簡略化されたバージョンを示しています。changeイベントを使用しない理由は、実際のコードに遅延タイマーがあるため、ユーザーが1秒間入力を停止した後、変更しなくてもイベントが発生するためです。イベントをトリガーするためにフォーカスします。

4

4 に答える 4

6

値を保存し、キーイベントで次のように変更されているかどうかを確認します。

$(function(){
  $('input#target').on('keyup', function(){
      if ($(this).data('val')!=this.value) {
          alert('Typed something in the input.');
      }
      $(this).data('val', this.value);
  });
});​

フィドル

于 2012-04-15T02:30:09.613 に答える
4

.changeイベントを使用するだけです。

更新：ライブ変更通知が必要な場合は、keyupイベントを実行する必要がありますか。つまり、値が変更されないキーを無視するようにハンドラーをプログラムする必要があります。

無視されるキーコードのホワイトリストを使用してこれを実装できますが、醜くなる可能性がDelあります。カーソルが入力の最後に配置されていない限り、値が変更されます。入力で選択された範囲であり、その場合はそうなります。

私が個人的に「純粋」ではないにしてももっと正気だと思うもう1つの方法は、要素の古い値を記憶し、それが変更された場合にのみ反応するようにハンドラーをプログラムすることです。

$(function() {
    // for each input element we are interested in
    $("input").each(function () {
        // set a property on the element to remember the old value,
        // which is initially unknown
        this.oldValue = null;
    }).focus(function() {
        // this condition is true just once, at the time we
        // initialize oldValue to start tracking changes
        if (this.oldValue === null) {
            this.oldValue = this.value;
        }
    }).keyup(function() {
        // if no change, nothing to do
        if (this.oldValue == this.value) {
            return;
        }

        // update the cached old value and do your stuff
        this.oldValue = this.value;
        alert("value changed on " + this.className);
    });
});​

DOM要素に直接プロパティを設定したくない場合（実際には、何も問題はありません）、表示されたときに代わり$(this).data("oldValue")に使用できます。this.oldValueこれには技術的にコードが遅くなるという欠点がありますが、誰も気付かないと思います。

実際の動作をご覧ください。

于 2012-04-15T02:16:24.080 に答える
1

これはそれを行い、カスタム属性を設定し、それに対してチェックします：

$('input').focus(function(){ 
    $(this).attr('originalvalue',$(this).val()); 
});

$('input').on('keyup',function(){ 
    if($(this).val()===$(this).attr('originalvalue')) return; 
    alert('he must\'ve typed something.'); 
});

イベントが複数回発生することに注意してください。

于 2012-04-15T02:28:14.037 に答える
0

これは、入力フィールドが空であるかどうかを明確にテストする別のバージョンです。

入力が空の場合、アクションは実行されません。

$(function(){
    $(selector).on('keyup', function(){
        if ($(this).val()!='') {
            alert('char was entered');
        }
    })
});
于 2014-08-07T09:35:42.410 に答える