JavaScript プログラミング

<input type=”date”>を使いやすく

普通に <input type="date" placeholder="日付を選択してください" value=""> と書くと、

日付の選択:



となって、placeholderも効かないし、「yyyy/mm/dd」なんて表示されてもどうなの?となりますよね?

そこで、<input type="text" onfocus="this.type='date'" onblur="this.type='text'" placeholder="日付を選択してください" value=""> としてフォーカスが付いたときだけ type=”text” を type=”date” に切り替えるというミニテクニック。

日付:




さらに、<input type="text" onfocus="this.type='date'" onblur="if(!this.value)this.type='text';" onchange="if(!this.value)this.type='text';" placeholder="日付を選択してください" value=""> のようにして、選択済みならtype属性を戻さないのもありかも。


コメントを残す

メールアドレスが公開されることはありません。

Comments links could be nofollow free.