MW WP Formで電話番号の入力欄を作ると、入力欄が3つに分割されてしまいます。分割を避けたくて「テキスト」項目にすると、今度はスマホで入力するときに数字ではなく文字のキーボードが立ち上がってしまう——電話番号欄でよくある悩みです。

結論から言うと、入力欄にinputmode="tel"を付与することで、テキスト項目のまま、スマホで数字のキーボード（テンキー）を表示できます。この記事では、なぜ文字キーボードが出てしまうのかという原因から、jQueryを使った具体的な対処法までを解説します。

なぜ数字キーボードが出ないのか

MW WP Formで「電話番号」項目を使うと、市外局番・市内局番・加入者番号のように入力欄が3分割されます。これを1つにまとめたい場合は「テキスト」項目を使えばよいのですが、テキスト項目のinputはtype="text"です。

type="text"のままだと、スマホでは文字入力用のキーボードが立ち上がります。電話番号を入力するのに毎回キーボードを数字に切り替えるのは手間で、ユーザビリティ的にもよくありません。

解決法：inputmode=”tel” を付ける

type="text"のまま数字キーボードを表示するには、inputmode="tel"を追加します。inputmodeは、表示するキーボードの種類だけを指定する属性です。

まず、対象のinputタグに目印となるクラス（ここではtel）を付けます。

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

次に、jQueryで、そのクラスにフォーカスが当たったときにinputmode="tel"を付与します。

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

これで、入力欄を1つのまま保ちつつ、入力時に数字のキーボードを立ち上げられます。ユーザーはキーボードを切り替えることなく、そのまま電話番号を入力できます。

なお、MW WP Formの項目設定でinputに直接属性を追加できる場合は、jQueryを使わずにHTML側でinputmode="tel"を指定してもかまいません。今回のようにjQueryで付与する方法は、テンプレート側でタグをカスタマイズしにくいときに有効な手段です。

inputmodeの値（tel と numeric）の違い

inputmodeには、数字系のキーボードを出す値がいくつかあります。用途に合わせて選び分けると、より使いやすくなります。

• inputmode="tel"：電話用のキーパッド。数字に加えて+・*・#などが表示される。電話番号向き
• inputmode="numeric"：数字（0〜9）のみのキーボード。郵便番号や数量など、純粋な数値入力向き

電話番号ならtel、郵便番号や個数のような数値ならnumeric、と使い分けると、入力体験がさらに良くなります。

ちなみに、そもそもtype="tel"にすれば数字キーボードは出ますが、MW WP Formのテキスト項目はtype="text"で出力されるため、type属性を変えるよりinputmodeを足すほうが手軽です。inputmodeは見た目やバリデーションに影響せず、キーボードの種類だけを切り替えられるのも利点です。

1点だけ補足すると、inputmodeはあくまでキーボードの表示を制御するだけで、入力値そのものをチェックするわけではありません。数字以外を入力させたくない場合は、別途バリデーションで形式を検証しましょう。inputmodeは主要なスマホブラウザで広くサポートされているため、実務でも安心して使えます。

まとめ

• MW WP Formの「電話番号」項目は入力欄が3分割されるため、テキスト項目で1つにまとめる
• type="text"のままでは文字キーボードが出るので、inputmode="tel"を付ける
• クラスを付けてjQueryで付与、または項目設定で直接指定する
• 電話番号はtel、純粋な数値はnumericと使い分ける

スマホでのフォーム入力は、キーボードが合っているだけで一気に快適になります。電話番号や数値の入力欄には、inputmodeを指定してユーザーの手間を減らしてあげましょう。