零弐壱蜂

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

2 min read

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

背景

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

解決方法

JavaScriptで消す方法

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

<input type="text" placeholder="入力してください" onfocus="this.placeholder=''" onblur="this.placeholder='入力してください'" />

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

CSSで消す方法

prefixは省略するが、以下のCSSを追加するだけでOK
input::focus::placeholder {
  color: transparent;
}