HTML で通貨入力を作成する

HTML の数値入力欄では、数値を受け取り、範囲を制限し、値の変更後に指定した小数桁数で表示できます。ただし、HTML に組み込みの通貨入力型はありません。type="number" を指定しても、通貨記号、桁区切り、ロケールに応じた書式は追加されません。以下の例では、HTML で数値を入力し、jQuery で値を範囲内に収めて丸めます。

type="number" は通貨書式ではない理由

<input type="number"> を使うと、ブラウザーに数値入力コントロールが表示されます。min、max、step 属性は入力可能な数値を定め、ブラウザーによっては数値入力用の操作部品も表示されます。しかし、これらの属性は金額の表示方法を決めるものではありません。たとえば 99.9 は、通貨記号やロケール固有の区切り文字のない数値のままです。

ユーザーに数値を入力してもらい、範囲を設けたい場合は、このコントロールを使います。通貨記号や桁区切りを含むローカライズされた表示には、JavaScript の Intl.NumberFormat などで値を別途書式設定します。また、表示用の書式設定と、金額を正確に保存または検証することは別の問題です。金融計算では、整数の最小通貨単位や十進演算ライブラリを使うことがよくあります。

範囲と精度を指定して数値入力欄を作る

次の属性では、初期値と例示用の最小値・最大値を指定します。アプリケーションの要件に合わせて値を変更してください。step="any" を指定すると、数値入力の既定の刻み幅である 1 では制約に合わない小数値も入力できます。ただし、この指定だけで値が小数第1位に丸められるわけではありません。

このセクションのコードと表示されるラベルや出力は英語のままです。

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

JavaScript では有限の数値を指定した範囲内に収め、toFixed() メソッドに 1 を渡して小数点以下1桁の文字列にできます。この例を実行すると、1234.6 が出力されました。

const min = 0.1;
const max = 5000000.0;
const entered = 1234.56;
const bounded = Math.min(max, Math.max(min, entered));
console.log(bounded.toFixed(1));

1234.6

JavaScript と jQuery で変更を処理する

change イベントは、ユーザーが入力欄の値を変更して確定した後に実行されます。通常は入力欄からフォーカスを移したときなどに発生し、Enter キーを押す必要はありません。入力中に画面を更新したい場合は、代わりに input イベントを使います。数値入力欄の valueAsNumber は数値を返しますが、使える数値が入力されていない場合は NaN を返します。値を範囲内に収める前に確認すれば、入力途中や空欄の値を上限または下限で置き換えずに済みます。

次のハンドラーは入力欄から min と max を読み取り、有限でない値はそのままにして、有限の値を範囲内に収めた後、小数第1位の文字列を書き戻します。toFixed(1) は数値を小数第1位に丸めて文字列を返します。常に切り上げるわけではありません。結果は数値を表す文字列であり、通貨書式ではありません。

通貨入力欄の完全な例を使う

このブラウザーページの例は、ページで jQuery が読み込まれていることを前提としています。カスタムプラグインは、選択された各入力欄にハンドラーを1つ登録します。コード例では、前述の例と同じ範囲および初期値を使います。

このセクションのコードと表示されるラベルや出力は英語のままです。

<input
  type="number"
  id="currencyInput"
  min="0.1"
  max="5000000.0"
  step="any"
  value="99.9"
/>

<script>
  $.fn.currencyInput = function () {
    return this.on("change", function () {
      const value = this.valueAsNumber;
      if (!Number.isFinite(value)) return;

      const min = Number.parseFloat($(this).attr("min"));
      const max = Number.parseFloat($(this).attr("max"));
      const bounded = Math.min(max, Math.max(min, value));
      $(this).val(bounded.toFixed(1));
    });
  };

  $(function () {
    $("#currencyInput").currencyInput();
  });
</script>

ページの読み込み後、入力欄には最初に 99.9 が表示されます。値を確定すると、最小値を下回る有限の値は 0.1 に、最大値を上回る値は 5000000.0 に設定されます。範囲内の値は小数第1位に丸められます。コードは change を監視するため、入力中には値を変更しません。

この例で検証できることとできないこと

HTML の制約は、許容範囲外の値をブラウザーが識別するのに役立ちます。また、ハンドラーは値が確定したときに有限の数値を明示的に範囲内に収めます。空欄や有限でない値はユーザーが修正できるようそのままにし、この例では入力を必須にしていません。そのような値を拒否する必要がある場合は、別途エラーメッセージを表示し、入力が有効になるまで送信を防いでください。

この動作だけでは、送信されたデータの有効性や信頼性は保証されません。サーバーでも値を検証し、アプリケーションで定めた金額の精度と丸め規則を適用してください。ここでは数値を小数第1位で表示する例として toFixed(1) を使っていますが、通貨記号や桁区切りを追加したり、ロケールを選択したり、完全な金額表現を提供したりするものではありません。