input type="number" を安全に使う

input type="number"のmin・max・step属性の意味と、値が文字列で返る点、空欄やNaNの扱いなど、数値入力を安全に受け取る方法を解説します。

小数・スマホ入力のための属性

type="number"は数値以外の入力を弾き、スマホでは数字キーボードが開きます。小数を入力させるにはstep="any"が必要で、省略するとstepは1になり、小数は検証エラーとして扱われます。inputmode="decimal"を付けると、小数点キー付きのキーボードを出せます。

値は文字列として届く

valueは文字列です。数値にするにはvalueAsNumberかparseFloatを使います。未入力のときはNaNになるため、Number.isNaNで判定してから計算してください。「1e3」のような指数表記も有効な数値として受け付けられます。

min・maxは強制ではない

min・maxは検証の目安で、手入力された範囲外の値は、そのまま入ります。計算に使う前に、JavaScriptでも範囲を確認してください。ラベルはlabelのfor属性で入力欄と結び付けます。

この技術を使っているツール

ほか331本のツールでも使っています。