数値入力の空欄が0になる？NumberとvalueAsNumberを比較する

今回の仕上がり

個数を空欄にしたのに、処理の中では0になっている。数値入力のvalueは文字列で、空文字列をNumber()へ渡すと0になります。一方、数値用のvalueAsNumberは空欄をNaNとして返します。0を受け付ける入力ではこの違いを見落とすと未入力と0を混同します。

HTML・CSSのZIPを保存 · 単独で開く

空欄ではNumber(value)が0、valueAsNumberがNaN、今回のルールは受付しないとなった実画面 — 同じ入力要素の値を読み比べた実画面。アプリ側の条件は0〜10の整数に固定しています。タップして拡大できます。

空欄と境目の値を試す

「空欄」を押します。valueは空文字列、Number(value)は0、valueAsNumberはNaNです。
「0」と「3」を押します。どちらも今回の条件では「受付可能」になります。
「-1」「3.5」「11」を押します。数値へ変換できても、範囲や整数の条件に合わないため「受付しない」と表示されます。
入力欄を直接編集しても同じ表示が更新されます。値の送信・保存はありません。

const n = input.valueAsNumber;
const accepted =
  input.value !== "" &&
  Number.isInteger(n) &&
  n >= 0 && n <= 10;

Number.isInteger(NaN)はfalseなので、この条件では空欄を受け付けません。空欄の判定も明記し、どの入力を扱うかをコードから読めるようにしています。MDNのvalueAsNumberの説明でも、数値へ変換できない場合や数値欄を消した場合のNaNを確認できます。

変換と受付条件を分ける

valueAsNumberを使えば、あらゆる不正な値を自動的に拒否できるわけではありません。例えば11は数値ですが、今回の上限10を超えています。min・max・step・requiredによるブラウザ標準のvalidity.validと、アプリ側の判定を並べて確認しています。

料金や日付の計算、非常に大きな整数、小数の丸め誤差は今回の対象外です。受付条件をそのまま他の用途へ流用せず、何を許可する入力かを先に決めてください。サーバーで受け取る場合は、ブラウザの表示だけを信用せず受信側でも条件を確認します。関連するJSONの構文と値を分ける実験も、形式と意味を区別する例です。

2026年10月20日、隔離したEdgeでPC・375px幅、ライト・ダークを確認。HTMLとCSSは編集部の自作・CC0です。ZIPを展開してexample.htmlを開けます。スマホ実機、他ブラウザ、サーバー側の検証は未確認です。