inputのplaceholderをfocus時に文字を非表示(消す)にする方法

HTML5 から導入されたplaceholder属性。
指定した値が初期値として表示されるのでユーザビリティを高められる。

背景

フォーカス時にもplaceholderの文字列は表示されるため、入力ができる状態か否かが分かりづらい。 フォーカス時にはplaceholderの文字列は非表示にしたい。

解決方法

JavaScriptで消す方法

placeholder属性が存在する前に自前で初期値を設定した時にやっていた方法に近い。

フォーカス時に placeholder を空にして、フォーカスが外れたらplaceholderに値をセットする。
現環境では二度手間なのでやりたくはない。もしレガシー環境も考慮している(自前で placeholder を実装している)のであれば、この方法でやる必要がある。

CSSで消す方法

prefixは省略するが、以下のCSSを追加するだけでOK

input::focus::placeholder {
  color: transparent;
}