input type="number"で電話番号を入力させないで！

電話番号入力欄って数字しか入れてほしくないから、input type="tel"じゃなくてinput type="number"にすれば入力制御のあれこれをしなくて済むのでは？と思いませんか？

たとえば電話番号入力欄なら、以下のように制御したら使い勝手が良さそうです。

• 入力できるのは数字のみ
• 英数字やひらがな・カタカナ・漢字・記号は入力させない
• 入力できる文字列の長さは20文字まで

やっぱりinput type="number"にすれば全部解決できるじゃん！とますます思えてきますよね。でも電話番号はinput type="number"で入力させないでください！

NGな理由

NGパターンはいくつかありますが、ここでは代表的なNG理由を挙げます。
NGな理由を体験していただくために、OK・NGパターンそれぞれのフォームを用意しました。

先頭の0が消える

電話番号の先頭に0があるとき、input type="number"で080...と入力しスピンボタン（上下の矢印）を押すと、0が消えてしまいます。

そもそも電話番号は数値じゃない

電話番号は、数値のように見えて数値ではありません。
10個・1000個などの数は数値ですが電話番号は数字が横に並んでいるだけで、個数や数量をあらわすものではないのです。

個数や数量をあらわさない、数字が横に並んでいるだけのものに対してスピンボタンがついているとうっかり数を増減させてしまい入力していた電話番号がめちゃくちゃになってしまいます！

数字のとハイフンの入力だけを許可するフォームの作り方

• 入力できるのは数字のみ
• 英数字やひらがな・カタカナ・漢字・記号は入力させない
• 入力できる文字列の長さは20文字まで（長すぎるとスパムのURLが送られてくるかも…!?）

これらの条件をまとめて設定できたらフォームの使い勝手が良くなるし、集計時にデータを扱う時に便利そうです。

以下は条件をつけた、入力制御が効いている電話番号入力欄です。
全角・半角の数字（0〜9）と全角・半角のハイフンのみが入力可能になっています。

inputでtelを指定し、入力欄を作っています。
このとき、いくつかの属性を追加しました。HTML側で属性を追加すると、ある程度は入力制御がかけられます。

• inputmode="numeric"
  • スマートフォンで文字入力するときに、キーパッド（電卓みたいな数字だけのキーボード）が表示されて電話番号が入力しやすい
• maxlength="20"
  • 入力できる文字数の最大は20文字とする設定
• required
  • 必須入力項目扱い
• placeholder="01234567890"
  • プレースホルダー。フォームの入力欄に入っている薄い灰色のテキスト
• pattern="^[\x00-\x7F]+$"
  • 入力欄に入力できるテキストを正規表現で制御。これは英語のアルファベット、数字、一部の記号、改行などの制御文字の入力を許可している。

さらに細かく入力を制御する

JavaScriptから入力できる文字を正規表現で細かく指定しています。HTML側からすべてを制御できればいいのですがそうもいかず…

document.getElementById("tel").addEventListener("input", function (e) {
  e.target.value = e.target.value.replace(/[^0-9０-９ー-]/g, "");
});

【入力OKな文字】

• 半角数字: 0 1 2 3 4 5 6 7 8 9
• 全角数字: ０ １ ２ ３ ４ ５ ６ ７ ８ ９
• 長音記号: ー
• ハイフン: -

【入力NGな文字】
上記以外のすべて

まとめ

HTML側の制御＋JSでの正規表現により、柔軟性の高い入力制御が可能になりました。
国際電話も入力可能にするのであれば+の入力を許可したり、ほかにも全角数字の入力をさせないなど細かく制御できるのがポイントです。