お問い合わせはコチラから

Contact form 7で入力時にスマホキーボードを表示しない方法

サイト運営

お問い合わせフォームなどで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のオプションがありますが、効かないケースもあるので今回の記事のように自前で対応する方が安心感があります。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました