お問い合わせフォームなどでjavascriptのDatepickerを使うことも多いと思います。Datepickerが有効な場合、入力欄をクリックするとカレンダーが立ち上がって日付を選ぶことができます。
この仕組みは便利なのですが、スマホでは問題になりやすいです。というのも、Datepickerが有効な入力欄をタップすると、カレンダーの他にソフトウェアキーボードが立ち上がってしまうので、カレンダーが後ろに隠れてしまい、一気に入力しにくくなります。
この記事では、フォーム入力時にスマホでソフトウェアキーボードを表示しないようにする方法とContact form 7への適用方法についてまとめておきます。
inputタグにソフトウェアキーボードを表示しなくするには?
inputタグにreadonly属性を追加すればよいです。
↓こんな感じです。
<input type=”text” name=”date” value=”xxx” readonly=”readonly” />
こうすることで、スマホでソフトウェアキーボードを表示しなくなります。
Contact form 7でreadonly属性を追加するには?
readonlyを追加するだけで大丈夫です。
[text* your-name readonly class:required "John Smith"]
まとめ
今回の記事の内容が必要になったのは、以下のプラグインを使ったときです。このプラグインはとても使いにくいのですが、カレンダーと時間のpickerは現状これしか選択肢がありません。
プラグイン自体にreadonlyのオプションがありますが、効かないケースもあるので今回の記事のように自前で対応する方が安心感があります。