Opera11のデートピッカー、カラーピッカーは値のクリアができない

HTML5ではフォームコントロールの種類が増え、新しいタイプや属性が定義されています。

ブラウザの実装状況はHTML5 tests - inputs(www.quirksmode.org)などで見ることができますが、PC向けブラウザではOperaとWebKit系が進んでおり、一方でIEは最新の9でもほとんど対応していないことが分かります。

Operaは早くからフォーム関係の実装が行われており、特に日付関連においては唯一デートピッカー形式のUIとなっています。

オリジナル画像
図1Opera10.61のデートピッカー

2010年末にリリースされたOpera11では、デートピッカーの文字が大きくなって見やすくなるなどの改良が行われ、さらに type="color" にも対応してカラーピッカーが表示されるようになりましたが、一方でいったん値を設定するとなぜかクリアすることができなくなってしまいました。

オリジナル画像
図2Opera11.00のデートピッカー
オリジナル画像
図3Opera11.00のカラーピッカー

従来(10.61まで)はカレンダー下部に「今日」と「なし」のボタンがあり、「なし」を押すと値がクリアされるようになっていたのですが、11.00では「なし」ボタンが廃止され、またDeleteキーなどでも値を消すことができないため、悪名高きリセットボタン(<input type="reset"/>)(www.usability.gr.jp)か、ページの再読込など他のコントロールも巻き込んだ形でのリセットしかできなくなりました。

これでは不便なので、jQueryを使って簡単なスクリプトを書いてみました。

jQuery(function($) {
  var form = new Form();
  form.dateCtrl();
});

var Form = function() {
};
Form.prototype = {
  /**
   * 日付コントロール(input[type="date"])に関する処理
   */
  dateCtrl: function() {
    var inputDate = document.createElement("input");
    inputDate.setAttribute("type", "date");
    if (inputDate.type === "date") {
      var self = this;
      $(':input[type="date"]').each(function() {
        if (!this.required) {
          self.clearButton($(this)); // 必須でなければクリアボタンを配置する
        }
      });
    } else {
      // 日付コントロールに未対応の場合(省略)
    }
  },
  /**
   * コントロール直後に値をクリアするボタンを配置する
   *
   * @param ctrl コントロール要素
   */
  clearButton: function(ctrl) {
    var clearButton = $('<button type="button">クリア</button>').bind("click", ctrl, function() {
      arguments[0].data.val("");
    });
    ctrl.after(clearButton);
  }
};
オリジナル画像
図4クリアボタンを配置した例

取り急ぎ type="date" の場合しか対応していなかったり、キー操作で値を編集できるSafariやGoogle Chromeでもクリアボタンが表示されてしまうなど、やっつけ感満載ですが、これでスクリプトが有効な環境に限り値をクリアすることができるようになりました。