1

基本的に次のようなコードがあります

.on("keyup", "input", function (e) {
    this.value = utils.formatNumber(this.value);                    
})
.on("change", "input", function(e) {
    expensiveFunctionThatUpdatesView();
})

そのままでは、値はユーザーが入力すると正しくフォーマットされますが、ユーザーが入力フィールドからタブを移動したりクリックしたりすると、onChange イベントはトリガーされません (したがって、ビューは更新されません)。keyup イベント ハンドラー関数の本文をコメント アウトすると、すべてが意図したとおりに機能します (書式設定を除く)。これはなぜですか？

私の知る限り、onchange イベントがトリガーされるために満たす必要がある2つの条件があります。

  1. onfocus イベントをトリガーした何かによってコントロール/入力フィールドに入力されたに違いありません (古い値を保存します)。
  2. フォーカス時に存在していた値は、「exit」/blur に存在する値とは異なります

ところで、コードを「ぼかし」に変更しようとしましたが、フィールドをフォーマットしてもトリガーされません。これをテストするときに Chrome を使用します。

4

2 に答える 2

1

val()javascript（または/を介したjQuery text()）を介してテキストボックスの値を設定しても、ブラウザーの変更イベントがトリガーされることはありません。元の値を保存し、それをフォーマット後の値と比較して、プログラムで変更をトリガーする必要があります。

.on("keyup", "input", function (e) {
    var originalValue = this.value;
    var newValue = utils.formatNumber(originalValue);

    this.value = newValue;

    if (originalValue !== newValue) {
        $(this).trigger('change');
    }
})
于 2012-10-23T13:30:46.660 に答える