5

概要：

テキストボックスを時間入力ボックスに変換するjqueryプラグインを書いています。つまり、ユーザーは HH:MM 形式で時間を入力できます。このプロセスの一部として、適切な場所にコロン (:) を挿入します。キーアップ時に、ユーザーが2つの数字を入力したかどうかを確認し、入力した値にコロンを追加します。

問題：

このアプローチは、誰かがテキスト ボックスにプラグインを適用するが、カスタムの onchange ハンドラーも必要とする場合を除き、正常に機能します。

私の理解：

推測なので、間違っていたらごめんなさい。

  • おそらく、テキストボックスには、編集が開始される前にテキストボックスに値を保持する内部"_value" (パブリック値属性と区別するためのアンダースコア)フィールドがあります。フォーカスがテキストボックスから離れると、JS エンジンは、テキストボックスの現在の値がテキストボックスの値と一致するかどうかをチェックします。"_value"それらが異なる場合、 onchangeイベントが発生します。
  • おそらく、通常のネイティブ キーストロークを使用した値の変更 "_value"では、値だけが変更されるわけではないため、onchangeが発生します。しかし、おそらく JS を介して行われた値の変更は、値と and の両方"_value"を変更するので、onchange イベントは発生しませんか?

回避策:

値とは関係がないため、blur イベントが発生します。したがって、blur イベントから change イベントを明示的に発生させることができます。

関連リンク：

SO で同じ質問のリンクをいくつか見つけましたが、回答がありません (IMHO) がエレガントまたは正しい解決策を提供します。ここに私が見たもののいくつかがあります：

簡略化されたコード:

$(document).ready(function () {
    $("input").keyup(function () {
        this.value = '*' + this.value;
        // this changes the value, but does not fire the onchange event
        // and it also does not fire it when the textbox loses focus.
        // blur fires though.
    });
    $("input").change(function () {
        alert('in change');
    });

    $("input").blur(function () {
        alert('in blur');
    });
});

フィドル:

http://jsfiddle.net/sajjansarkar/vHgst/4/

テスト済みブラウザ: IE8、10 および Chrome。FireFox(!!) で動作 (+1 Felix Kling)

4

1 に答える 1