通貨型の入力フィールドを使用する方法

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

上記のコードでは、<input>要素のtype属性をnumberに設定し、step属性を0.01に設定しています。これにより、ユーザーは小数点以下2桁までの金額を入力できます。さらに、min属性とmax属性を使用して、許容範囲を制限することもできます。

ただし、このコードだけでは通貨の記号や桁区切りなどの装飾は行われません。通貨型の入力フィールドをより使いやすくするには、JavaScriptを使用してフォーマットを追加する必要があります。

<input type="text" id="currencyInput">
<script>
  const currencyInput = document.getElementById('currencyInput');
  currencyInput.addEventListener('input', formatCurrency);
  function formatCurrency() {
    // 入力された値を取得
    let value = currencyInput.value;
    // 数値以外の文字を除去
    value = value.replace(/[^0-9.]/g, '');
    // 小数点以下2桁までに丸める
    value = parseFloat(value).toFixed(2);
    // 3桁区切りのカンマを追加
    value = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    // 入力フィールドにフォーマット後の値を設定
    currencyInput.value = value;
  }
</script>

上記のコードでは、<input>要素のtype属性をtextに変更し、id属性を追加しました。JavaScriptのformatCurrency関数は、入力された値を取得し、不要な文字を削除してから、小数点以下2桁までに丸めます。さらに、3桁区切りのカンマを追加してフォーマットされた値を表示します。

このように、HTMLとJavaScriptを組み合わせて通貨型の入力フィールドを作成することができます。これにより、ユーザーが金額を正確に入力できるだけでなく、読みやすい形式で表示されるようになります。

以上が通貨型の入力フィールドを実装する方法の例です。他にも様々な方法がありますが、この記事では基本的な手法を紹介しました。ぜひこれを参考にしながら、自分のウェブサイトやアプリケーションに通貨型の入力フィールドを追加してみてください。