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

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

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

• Chrome 81.0.4044.92

• Firefox 76.0.1

「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">

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