Zenn
🔴

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

2024/07/30に公開
HTML
Vuetify
Vue 3
tech

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

<app-form-input
    type="date"
    :placeholder="$filter.message('placeholder_date')"/>

実現する方法を模索した結果

  1. デフォルトを「input type="text"」にしてplaceholderを有効にし、
  2. 「onfocus」イベントと「onblur」イベントを使ってfocusが当たっているときだけ input
    type="date" に切り替える。
<app-form-input
    type="text"
    onfocus="this.type='date'"
    onblur="this.type='text'"
    :placeholder="$filter.message('placeholder_date')"/>

手入力ができることをさせないなら、「@keydown.prevent」を付けば解決。

<app-form-input
    type="text"
    onfocus="this.type='date'"
    onblur="this.type='text'"
    @keydown.prevent
    :placeholder="$filter.message('placeholder_date')"/>

Discussion