Hail2u

プレースホルダー文字列とフォーカス

Chrome 17やSafari 5ではフォームのプレースホルダー文字列(placeholder属性で指定した文字列)が文字を入力し始めるまで消えない。対してFirefox 10やOpera 11、Internet Explorer 10 PP5等ではフォーカスを当てただけで消える。仕様では特にどういう挙動になるべきかは決められていない(ような)ので、実装はベンダーのさじ加減。normalize.cssにこの実装の違いを吸収するルールが追加されたのでちょっと書いてみる。

僕は消えない方が好き。タブでフォーム要素間を移動したりする人なんかは消えない方が好ましく感じそう。プレースホルダー文字列を読んでからタブで移動とかしないので、フォーカスで消えちゃうと読めない(読まない)。

ただその一方でフォーカスしても文字が消えないとなると編集不可のフォーム要素っぽく見えてしまうのではないか、みたいな懸念もある。こういう入力サンプルを表示する機能がブラウザーにできたことをまだ知らない人がほとんどだと思うし、勘違いしてしまいそう。ただ最近はこういったフォーカスしてもプレースホルダー文字列が消えないUIを持つもの、例えばWindows 7のログイン画面やOpera 11のロケーション・バーみたいなのも多いので、認知されるのも時間の問題なんじゃないかとか楽観視はしている。

normalize.cssでフォーカスで消えるような方向で合わせたのは、単に実装上の都合なんじゃないかと思う。h1要素のフォント・サイズのアレと同じ。消える実装の方が多いのもあるかも。