inputmodeがnumericなら数字だけ？キーボードのヒントと検証を分けよう

スマホで数字のキーボードを出したくて、inputmode="numeric"を付けた。これで文字は入らなくなるのかな。inputmodeは、入力に適したキーボードなどを示すヒントで、入力値を検証するルールではないよ。

今回は二つのtext入力をブラウザで比べる。実際のIDや電話番号は使わず、練習用の短い文字だけを扱うよ。

numericは、入力する方法のヒント

<input type="text" inputmode="numeric">

対応する端末では、数字の入力に向くキーボードが表示される場合がある。どんなキーが出るかは端末やブラウザなどによって異なるよ。

この指定だけで、貼り付けやほかの方法から文字が入ることを禁止するわけではない。パソコンのキーボードで文字を入力しても、numericというヒントだけでは不正にならないんだ。

patternは、値が合うかを確認する条件

<input type="text" inputmode="numeric" pattern="[0-9]*">

この例は、ASCIIの0〜9だけというパターンを追加する。文字が入力されたら直ちに消す指定ではなく、入力値がパターンに合うかを検証する条件だよ。

また、*は0文字以上なので、空欄もこのパターンだけなら通る。必須にするrequiredとは別。全角の１２３も、ここで書いた[0-9]とは一致しない。

作例で、同じ値を二つへ入れる

作例では選択肢から二つへ同じ値を入れ、入力値とブラウザの妥当性を表示する。自分で入力欄を編集しても確認できるよ。「最初から試す」で両方を123へ戻せる。

ここでの「妥当」は、今回のHTMLの条件に合うという意味。実在のIDか、利用者が入力してよい値かまで確かめたことにはならないよ。

数字の見た目と、値の役割も分ける

電話番号、郵便番号、会員IDなどは、数字だけに見えても足し算する数とは限らない。先頭の0、桁数、区切りなどの扱いを、対象サービスの仕様に合わせて決めよう。

numericを付けるために、何でもtype="number"へ変える必要はない。どんな値を扱う入力かと、入力しやすい方法を分けて選ぶのが大切だね。

サーバー側の検証も必要

HTMLの検証だけに頼らず、受信した側でも対象の形式・範囲・権限を確認する。ブラウザの条件を変更したり、別の方法で送信したりできるため、入力ヒントを安全性の確認へ置き換えないようにしよう。

編集部ではChromiumで練習値、妥当性とリセットを確認した。実機スマホのキーボードの種類や、全端末での表示を試した記録ではないよ。HTMLの入力検証、IDの先頭の0も参考になるね。