- Web制作
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系の情報をお届けします。
