BLOG

ブログ
  • Web制作

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

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つのまま、入力時に数字のキーボードを立ち上げることができました。