はじめに
💡
この記事は、2024/12/20現在の情報です。
inputタグで何かの個数など、数値を入力したい時type属性は何を使いますか?
input[type="number"]
がありますが・・・これを使うとユーザビリティ的に良くないことが多かったので、理由と代替案を書きたいと思います。
理由
ChromiumとSafariで全角数字が入力できない
Chromiumでは全角数字を入力すると、そもそも入力ができないようになっています。
全角数字から半角数字に変換するJavaScriptコードを書いても、入力がそもそも出来ないので効果がありません。
色々なユーザー層が多いEdgeでもこの問題が発生してしまうので、問題になりやすいです。
代替案
代替案としては、以下のようにします。
最大値と最小値を指定したい場合は、 aria-valuemin
と aria-valuemax
を使います。
さらにJavaScriptで制御を加えます。
このコードにより、以下のような動作になります。
-
全角数字での入力は、半角数字に置き換えられます。
-
parseIntの基数10で解釈されます。
-
入力欄が必須の場合かつ、値が
aria-valuemax
を超えている場合、最大値を aria-valuenow
に設定します。
-
入力欄が必須の場合かつ、値が
aria-valuemin
未満の場合、最小値を aria-valuenow
に設定します。
-
現在の数値は
aria-valuenow
に随時入力されます。
さいごに
何かとより良い方法を探して色々なやり方に飛びつきがちですが、検証はしっかりやりたいところです。
おまけ
全角数字が入力できないのはブラウザの問題なので、Issueを上げました。
何も気にせずに type=”number”
が使えるようになるといいですね。
Chrome
https://issuetracker.google.com/issues/383232110
Safari
https://bugs.webkit.org/show_bug.cgi?id=284363