HTMLとJavaScriptで小数点第2位まで入力できる数値入力欄を作成する方法

2024-04-02

HTMLで小数点第2位まで許可する「input type="number"」の作り方

このページでは、HTMLの <input type="number"> 要素を使って、小数点第2位まで入力できる数値入力欄を作成する方法を解説します。

<input type="number" step="0.01" min="0" max="100">

コード解説

type="number": 数値入力欄であることを指定します。
step="0.01": 入力できる最小単位を0.01（小数点第2位）に設定します。
min="0": 入力できる最小値を0に設定します。

補足

step 属性は、必須ではありませんが、設定することで入力できる値を制限できます。
min 属性と max 属性は、入力できる範囲を制限できます。
上記のコードは、小数点第2位まで入力できる数値入力欄を作成します。小数点以下桁数を変更したい場合は、step 属性の値を変更してください。

上記のコードは、基本的なものです。さらに高度な設定を行う場合は、上記の参考資料を参照してください。
ブラウザによっては、step 属性や min 属性、max 属性の動作が異なる場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>小数点第2位まで入力できる数値入力欄</title>
</head>
<body>
  <h1>小数点第2位まで入力できる数値入力欄</h1>
  <form action="#">
    <label for="num">数値を入力してください：</label>
    <input type="number" id="num" step="0.01" min="0" max="100">
    <input type="submit" value="送信">
  </form>
</body>
</html>

この画面で、小数点第2位までの数値を入力して「送信」ボタンをクリックすると、入力された数値が送信されます。

このコードは、以下の点に注意して作成しました。

min="0" 属性と max="100" 属性を使って、入力できる範囲を0から100に設定しています。
label 要素を使って、入力欄の説明を表示しています。
input 要素の id 属性と for 属性を使って、ラベルと入力欄を関連付けています。

このコードを参考に、小数点第2位まで入力できる数値入力欄を作成してみてください。

小数点第2位まで入力できる数値入力欄を作成する他の方法

input 要素の oninput イベントにJavaScriptのコードを設定することで、入力値をリアルタイムにチェックし、小数点第2位を超える場合は切り捨てることができます。

<input type="number" id="num" oninput="this.value = this.value.slice(0, 5)">

input 要素に値が入力されるたびに、oninput イベントが発生します。
this.value で入力値を取得します。
this.value.slice(0, 5) で、入力値の先頭から5文字を取得します。
取得した文字列を this.value に設定することで、入力値を5文字に制限します。

このコードは、シンプルな方法ですが、ブラウザによっては動作しない場合があります。

CSSを使う

input 要素に ::-webkit-inner-spin-button 疑似要素のスタイルを設定することで、スピンボタンを非表示にすることができます。

input[type="number"]::-webkit-inner-spin-button {
  display: none;
}

input[type="number"] セレクタは、type="number" 属性を持つ input 要素に適用されます。
::-webkit-inner-spin-button 疑似要素は、スピンボタンを表します。
display: none; でスピンボタンを非表示にします。

このコードは、スピンボタンを非表示にすることで、ユーザーが小数点以下桁数を変更できないようにすることができます。

ライブラリを使う

jQueryなどのライブラリを使えば、より簡単に小数点第2位まで入力できる数値入力欄を作成することができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(function() {
  $("#num").on("input", function() {
    var val = $(this).val();
    if (val.length > 5) {
      $(this).val(val.slice(0, 5));
    }
  });
});
</script>

<input type="number" id="num">