input type="date"でplaceholderが効かないので強引に楽な方法で対処する

input type="date" の場合、placeholderを指定しても基本的に反映されないことを知った。

<input type="date" name="birthday" id="birthday" value="" placeholder="誕生日">

f:id:kohtaro24:20200516145110p:plain

f:id:kohtaro24:20200516145150p:plain

「type="date"は維持したいけどplaceholderは使いたい」というのを手っ取り早く実現する方法を模索した結果、

  • デフォルトを input type="text" にしてplaceholderを有効にし、
  • onfocus イベントと onfocusout イベントを使ってfocusが当たっているときだけ input type="date" に切り替える

という荒業があった。

<input type="text" name="birthday" id="birthday" onfocus="this.type='date'" onfocusout="this.type='text'" placeholder="誕生日" style="height: 30px; width: 200px; padding: 10px 10px">

f:id:kohtaro24:20200516145807g:plain

ぶっちゃけplaceholderでなんとかせずlabelタグで良かったなと思ったけど、一応残しとく