7 
$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');// try with any other char
    },
    change: function(){
       console.log('I\'m a changed input');
    }
});

この単純化されたjsfiddle の例でこのバグをステージングしました。このバグに関連する私の問題は、作成中の金融アプリがあり、入力データが変更された場合に「変更を保存」ボタンを表示する必要があることです。（必要に応じて）すぐに千区切り記号を挿入する必要があるため、keyupこのバグは本当に私を悩ませ、その機能を壊します。

それを再現するには、 jsfiddleの例に行き、最初の入力でクロムタイプのコンソールを開きます。keyupイベントは適切に発生しますが、タブで入力のフォーカスを外すか、その外側をクリックするとchangeイベントは発生しません。他の入力についても同じことをchange行うと、起動されます。

これを Firefox でテストしたところ、期待どおりに動作しました。

私が使用している Chromium のバージョンは 14.0.835.202 (Developer Build 103287 Linux) Ubuntu 11.10 です。

と

Chrome Webサイトから直接インストールしたばかりのGoogle Chrome 15.0.874.106で試しました。

イベントに区切り記号を挿入することもできchangeますが、ユーザーは 7 桁以上の数字を大量に入力するため、入力時に区切り記号を挿入した方が UX が向上します。

4

5 に答える 5

8

IE9 で試してみましたが、Chrome と同じ動作です。

バグではないと思います。

HTML 要素で .val(value) を使用すると、「手動で変更された」フラグがリセットされるため、変更イベントは発生しません (ユーザーはval() 操作後に手動で何も変更しないため)。

于 2012-09-20T10:22:42.810 に答える
6

これは有効な Chrome バグのようです。onChange私の推測では、値を変更すると、ユーザーが最後に入力に焦点を合わせてからイベントをトリガーするために Chrome が依存しているものはすべてリセットされます。残念ながら、すべてのブラウザで機能する回避策を使用することをお勧めします。

このような例でコードを更新しましたhere。入力がフォーカスを受け取ったときに元の値を保存し、入力がぼやけているときに元の値を更新された値と比較するという考え方です。それが異なる値である場合は、変更コールバックに入れたのと同じロジックを実行します。

于 2012-09-14T18:44:07.300 に答える
4

この動作は想定されているようです。( http://dev.w3.org/html5/spec/common-input-element-apis.html#event-input-changeを参照)。

プログラムで値を変更する場合は、手動でイベントを発生させる必要があると述べています。

https://developer.mozilla.org/en-US/docs/DOM/element.onchangeによると、Mozilla は次のように変更を実装します。

  control.onfocus = focus;
  control.onblur = blur;
  function focus () {
      original_value = control.value;
  }

  function blur () {
      if (control.value != original_value)
        control.onchange();
  }

今のところ、blur イベントをキャプチャして、そこから「change」イベントを発生させることができます。(Mozilla が行っているように、change() を呼び出す前に、前後の値を確認することをお勧めします。)

blur: function(){
   $(this).change();
}
于 2012-09-21T19:39:33.397 に答える
1

それは私には動作のようです..要素の値がスクリプトを介して変更された場合、onchange はトリガーされません。このような場合、値を保存し、値とトリガーを手動でonfocus確認する必要があります。onbluronchange

下記参照、

デモ: http://jsfiddle.net/vCxme/6/

$('input#not-gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
        $(this).val($(this).val() + '.');
    },
    change: function(){
       console.log('I\'m a changed input');
    },
    focus: function ( ){
        $(this).data('orig_value', $(this).val());
    },
    blur: function () {
        if ($(this).val() != $(this).data('orig_value')){
            $(this).change();
        }
    }
});
$('input#gonna-work').bind({
    keyup: function(){
        console.log('Typed a key');
    },
    change: function(){
       console.log('I\'m a changed input');
    }
});

上記の実装は、FF onChangeからの疑似コードからのものです。

注:スクリプトを介して値が変更された場合、ブラウザの変更イベントはトリガーされません。

于 2012-09-21T15:33:30.993 に答える
0

キーアップイベントが実行されるたびにフィールドの値をチェックするという、少し異なる角度からアプローチします (回避策があります)。http://jsfiddle.net/vCxme/3/を参照してください

于 2012-09-21T11:00:49.337 に答える