【HTML】input要素のnumber型はJavaScriptで値が取得できないことがある

今回は、HTMLのinput要素にnumber型（type="number"）を指定したとき、JavaScriptを使用して値が取得できないことがあります。問題の原因とサンプルプログラムを使用しての動作例を紹介していきます。

検証環境
原因
1. ブラウザごとの動作
2. 入力値ごとの動作
サンプルプログラム
まとめ

検証環境

検証に使用した環境／ライブラリを次に記載します。

Google Chrome
- バージョン：104.0.5112.82（64 ビット）
Firefox
- バージョン：91.13.0esr（64 ビット）

原因

JavaScriptで値が取得できないのは、入力した値が数値として使用できないときになります。ブラウザごとに入力可能な値、入力したときの動作例をそれぞれ記載します。

ブラウザごとの動作

ブラウザごとに入力可能な値は、次のようになります。

Google Chrome

次の値を入力することが可能です。

値	用途
0123456789（半角数字）	数値を入力するために使用します。
-（ハイフン）	マイナス表記を入力するために使用します。
.（ドット）	小数点を入力するために使用します。
e、または、E	指数表記（E表記）を入力するために使用します。

検証環境の Google Chrome での入力可能文字一覧

Firefox

次の値を入力することが可能です。

値	用途
すべての入力値	-

検証環境の Firefox での入力可能文字一覧

入力値ごとの動作

入力した値がJavaScriptで数値として取得できるかどうかの動作例は、次のようになります。

入力値	値取得可否
-1234	取得可能
123-4	取得不可
123.4	取得可能
.1234	取得可能
123e4	取得可能
e1234	取得不可

JavaScript での値が取得できるかどうかの動作例一覧

サンプルプログラム

JavaScriptで値を取得するサンプルプログラム例は、次のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form>
      <div>
        <input type="number" onkeyup="console.log(this.value)" />
      </div>
    </form>
  </body>
</html>

プログラム例の動作は、input要素に入力した値をコンソールに出力している処理になります。

コンソールは、開発ツール（デベロッパーツール）で表示することができます。検証したブラウザでは「F12」で画面を表示することができます。

「123-4」を入力すると「123」まではコンソールに値が表示されます。「-」を入力すると以降の値は、空文字が表示される動作になります。

動作デモは次のサイトで確認することもできます。