javascript - 値が変更された場合はフォーム フィールドの色を変更する

Question

私はいくつかのJavaScriptロジックで少し迷っています。3 つのテキスト フィールドを持つフォームがあります。それらは、javascript (プレースホルダーなし) を介してデフォルト値を示します。フィールド値が変更されていない場合、フォームがフォーカスされると値がクリアされ、フォームがぼやけるとデフォルト値が復元されます。

値が変更された場合にフィールド テキストの色が灰色 (デフォルトのプレースホルダー値) から黒に変更されるように、条件付きロジックを記述する必要があります。

3 つのフィールドには異なるデフォルト値があります。Blur で一般的なスクリプトを作成して、現在のフィールドの値をチェックし、デフォルト値と比較してテストしようとしました。

  $fields = $('#webform-component-group-1 .webform-component-watermarked');
  var keys = [];
  var values = [];
  console.log($fields.length);
  $fields.each(function(){
    keys.push($(this).attr('id'));
    values.push($(this).val());
    $(this).blur(function(){
      console.log($(this).val());
      console.log($(this).val() !== values[keys.indexOf($(this).attr('id'))]);
    });
  });

ただし、ぼかしでテストを実行するとプレースホルダーの値が復元されないため、テストは常に true を返します。

この問題を処理する最善の方法は何でしょうか?

乾杯