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タグで良かったなと思ったけど、一応残しとく