<input type="number"> の注意点

このページは、<input type="number"> の注意点を記載するページです。

目次

<input type="number"> が適切な項目

<input type="number"> は厳密な数値項目にのみ使用して、「番号」項目には使用しないほうがよいです。「入力を数字のみに制限できるから」というような理由で <input type="number"> を使用すると、想定していない挙動になる可能性があります。(後述)

参考

The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with an inputmode or pattern attribute).

(要約)
type=number 状態は、たまたま数字だけで構成された入力で厳密には数ではない入力には適切ではありません。例えば、クレジットカード番号や米国の郵便番号には不適切でしょう。type=number を使用するかを判断する簡単な方法は、入力部品がスピンボックスのインターフェース (例えば「上」「下」の矢印) を持つことが理にかなっているかを検討することです。クレジットカード番号の最後の桁を1つ間違えることは小さなミスではなく、すべての桁を間違えるのと同じことです。そのため、ユーザーが「上」「下」ボタンを使用してクレジットカードを選択するのは理にかなっていないでしょう。スピンボックスのインターフェースが適切ではないとき、type=text はおそらく正しい選択です (おそらく inputmode または pattern 属性とともに)。

4.10.5.1.12 Number state (type=number) | HTML Standard

入力できる文字がブラウザごとに異なる

<input type="number"> で入力できる文字は、ブラウザごとに異なります。
HTML の仕様上は、<input type="number"> の入力に使用できる文字は下記のとおりです (入力可能な文字に e, E なども含まれます)。

• 0～9 (U+0030 DIGIT ZERO ～ U+0039 DIGIT NINE)
• + (U+002B PLUS SIGN)
• - (U+002D HYPHEN-MINUS)
• . (小数点用。U+002E FULL STOP)
• e, E (指数表記用。U+0065 LATIN SMALL LETTER E, U+0045 LATIN CAPITAL LETTER E)

2022年1月現在、Chrome や Edge では入力できる文字は上記ですが、Firefox や Safari では制限されません。

参考

If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number.

(要約)
要素が可変である場合、ユーザーエージェントはユーザーがその表現される数を value で変更できるようにすべきです (浮動小数点数の値の解析ルール (rules for parsing floating-point number values) を適用して得られた値として)。ユーザーエージェントは、ユーザーが有効な浮動小数点数 (valid floating-point number) ではない空でない文字列に value を設定することを許可してはなりません。

4.10.5.1.12 Number state (type=number) | HTML Standard

A string is a valid floating-point number if it consists of:

1. Optionally, a U+002D HYPHEN-MINUS character (-).
2. One or both of the following, in the given order:
   1. A series of one or more ASCII digits.
   2. Both of the following, in the given order:
      1. A single U+002E FULL STOP character (.).
      2. A series of one or more ASCII digits.
3. Optionally:
   1. Either a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E).
   2. Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B PLUS SIGN character (+).
   3. A series of one or more ASCII digits.

(要約)
文字列が次の要素で構成されている場合、有効な浮動小数点数 (valid floating-point number) です。

1. 任意の U+002D HYPHEN-MINUS character (-)。
2. この順番で1つまたは両方が続く
   1. 1桁以上の ASCII 数字
   2. この順番で両方が続く
      1. 1つの U+002E FULL STOP character (.)。
      2. 1桁以上の ASCII 数字。
3. 任意
   1. U+0065 LATIN SMALL LETTER E character (e) または a U+0045 LATIN CAPITAL LETTER E character (E) のどちらか。
   2. 任意で、 U+002D HYPHEN-MINUS character (-) または U+002B PLUS SIGN character (+)。
   3. 1桁以上の ASCII 数字。

2.3.4.3 Floating-point numbers | HTML Standard

重要: 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。これらは、ブラウザー間でこれに関するいくつかの意見の相違があるようです。 バグ 1398528 を参照してください。

<input type="number"> - HTML: HyperText Markup Language | MDN

入力値が有効な値でないとき value が取得できない

<input type="number"> でユーザーが入力した値が「有効な浮動小数点数」(valid floating-point number) でない場合は value が空文字列になります。
ユーザーが入力した値に対して独自の入力検証処理を行いたいときでも、もともとの入力値にアクセスする方法がありません。

<input type="number" id="_n1">
<button type="button" onclick="document.getElementById('_s1').textContent = '値: ' + document.getElementById('_n1').value;">確認</button>
<span id="_s1">値: </span>

※ Chrome, Edge では「e1111」などを、Firefox, Safari では任意の文字列を入力して「確認」ボタンを押してみてください。有効な値でない場合 value が空文字列になるので「値: 」の部分に何も表示されません。

参考

「入力できる文字がブラウザごとに異なる」の参考を参照してください。

maxlength が無効になる

<input type="number"> で使用できるのは max 属性 (最大値) で、maxlength 属性 (最大桁数) は使用できません (maxlength を指定しても反映されません)。 JavaScript で maxlength 相当の処理をある程度自力で実施することはできますが、<input type="text"> に変更したほうが問題が少ないです。

参考

• 4.10.5 The input element | HTML Standard

入力値の選択範囲を取得・設定できない

<input type="number"> では入力値の選択範囲を取得・設定するための selectionStart や selectionEnd、選択範囲を設定するための setSelectionRange() が使用できません。

maxlength を JavaScript の keypress などで自力で処理するようにしていても、例えば「<input type="number" maxlength="5"> の欄にユーザーが5文字入力後、1文字範囲選択して1文字入力した」のようなケースに対応するのが難しくなります ¹。

参考

• 4.10.5 The input element | HTML Standard
• HTMLInputElement.setSelectionRange() - Web API | MDN