2022.07.29(Fri)

MW WP Form スマホで入力時にテンキー（数字のキーボード）を表示する方法

WordPress のフォームプラグイン MW WP Form で電話番号の入力欄を作ろうとすると入力欄が3つに分割されてしまいます。

分割したく無い場合は「電話番号」にせず「テキスト」を選んでやればいいのですが、ユーザーが入力しようとした時に数字のキーボードではなく、文字のキーボードが立ち上がってしまいます。

type 属性が tel ではなく text なのでそうなりますね。

これはユーザービリティ的に良くありません。

そこで type 属性を text にしたまま数字のキーボードを表示させるには、inputmode=”tel” を追加してやれば良いみたいです。

<input type="text" class="tel">

上記のようにフォームの input タグに適当なクラスを追加します。
（この場合は class=”tel”）

$('.tel').on('focus', function () {
  $(this).attr("inputmode", "tel");
});

次に jQuery で上記のように指定したクラスに対して inputmode=”tel” を追加してやります。

これで入力欄が1つのまま、入力時に数字のキーボードを立ち上げることができました。

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。