input type

高幡不動の骨董市で見つけた猫。 中央の奴がやばい。

猫も色々だが、ブラウザの入力用部品 input の type も色々。 Edge の出始めの頃に一気に増えた感があるが、当時はブラウザのサポート状況がバラバラで安心して使えなかったんだよな。 まだ IE も生きてたし。

それから何年も経ち、マイクロソフトが IE どころか自前の Edge も捨てた今なら、ブラウザのサポートも安定して行き渡ったことだろう。 安定するだけじゃなく、更に便利な機能も実装されているのではないか。

ということで、改めて調べてみた。

色

所謂カラーピッカーが使えるようになっていた。 ここで 「使える」 とは、実用に足るって意味。

実際に表示されるカラーピッカーの見た目や機能はブラウザによって異なるが、選択／指定の結果である value がRGBの16進コードなのは共通。 って、これが違ったら話にならないか。

選択結果が value に設定されるタイミングが、ブラウザによってちょっと違うのが微妙に残念。

逆に微妙に嬉しいのがスポイト機能。 パレットから色を選択したり要素毎に値を設定したりは自分でも簡単に作れるが、どこかの色を拾ってくるのは難しい。 そのどこかがブラウザの外だと、途方に暮れるレベルだからね。

日付と時刻

かつては日付入力のためにカレンダーを作ったものだが、そんな苦労はもう不要になった。

入力／選択の結果である value は標準的な日時書式に準じた形。 なので入力欄の見た目と若干異なってしまうのが、ちょっと惜しい。 具体的には、表示は "/" 区切りなのに値は "-" 区切りとか。 日付と時刻の間が "T" とか。

上記の他にも、年月のための "month" や、第何週かを扱うための "week" があるが、現時点では FireFox と Safari が未対応なので省略。 今未対応なら、きっとこの先も未対応だろう。 あんまり使われそうにもないし。

選択肢付き入力

昔、打ち合わせの場で 「プルダウンからの選択も直接入力も出来るようにして欲しい」 と要望されたことがあった。 割と頻繁にあった。 しかし標準部品に無いので、いつも微妙に否定的な回答をしてた。 「できなくはないですけど…」 みたいな。 結局、何度か作ることになったのだが。

それが今なら簡単に出来る。

要点のみ抜き出して、ソースはこんな感じ。

入力欄の list 属性で、別途用意した datalist 要素の id を指定するだけ。 datalist は使い回しも可。 もちろん動的に作ることも可能。

毎回同じことを思うのだけど、便利になったよなぁ…。