HTML で通貨入力を作成する
この記事では、ユーザーは通常の HTML <input> フィールドを通貨入力フィールドに変換する方法を学習します。 HTML と jQuery を使用して目標を達成します。
JavaScript toFixed() メソッドを使用して、通常の <input> を HTML の通貨入力に変換する
HTML では、通常の <input> 要素が利用可能で、要件に応じてそのタイプを設定できます。 タイプを number に設定するだけでは、タイプを通貨入力にすることはできません。 JavaScript または jQuery を使用してさらに変更を加える必要があります。
たとえば、以下のように HTML で <input> フィールドを作成できます。 いくつかの属性が含まれています。 type 属性は、受け取る入力のタイプを示します。
min および max 属性は、それぞれ最小値と最大値を示します。 id 属性は、<input> 要素の一意の ID であり、これを使用して jQuery で要素にアクセスできます。
<input type="number" id="currencyInput" min="0.1" max="5000000.0" value="99.9" />
jQuery を使用して、上記の <input> フィールドを通貨入力に変換します。 無名関数を作成し、inovkeCurrencyInput 変数に格納しました。
ユーザーは、以下の jQuery で無名関数を作成する方法を確認できます。
$.fn.inovkeCurrencyInput = function() {
// function code
}
次に、jQuery を使用して関数内の入力要素に change イベント リスナーを追加します。 数値入力に何かを入力するたびに、変更を検出するのに役立ちます。
invokeCurrencyInput() 関数内に change イベント リスナーを追加する jQuery コードを次に示します。
$(this).change(function() {
});
その後、ユーザーが数値入力から何かを追加または削除するたびに、valueAsNumber プロパティを使用して数値入力の値にアクセスします。 また、attr() メソッドを使用して、入力フィールドの min および max 属性にアクセスします。
min および max 属性にアクセスした後、以下に示すように parseFloat() JavaScript メソッドを使用して float 値を解析します。
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr('max'));
var minValue = parseFloat($(this).attr('min'));
これで、通貨入力フィールドが受け入れることができる最小値と最大値が得られました。 また、入力フィールドの現在の値が currencyValue 変数に格納されています。
if ステートメントを使用して、currencyValue が minValue と maxValue の間にあるかどうかを確認します。
if (currencyvalue > maxValue) {
currencyvalue = maxValue;
}
if (currencyvalue < minValue) {
currencyvalue = minValue;
}
number.toFixed(precision) メソッドを使用して、currencyValue を特定の精度に丸めます。 この場合、精度値は 1 であるため、ユーザーが 1 を超える精度で入力値を入力すると、入力フィールドは自動的に数値を切り上げ、単精度を設定します。
ここでは、number.toFixed() メソッドの使用方法を示しました。 また、最終的にフォーマットされた currencyValue を <input> 要素の値として設定します。
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
最後に、ドキュメントが読み込まれるたびに <input> 要素で invokeCurrencyInput() 関数を呼び出します。 ここでは、ID を使用して <input> 要素にアクセスします。
$(document).ready(function() {
$('input#currencyInput').inovkeCurrencyInput();
});
完全なソース コード - HTML + jQuery:
以下のコード例では、jQuery CDN も追加しています。 HTML コードで jQuery を呼び出すには、ユーザーがこれを追加する必要があります。
<html>
<body>
$
<input
type="number"
id="currencyInput"
min="0.1"
max="5000000.0"
value="99.9"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"
integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
$.fn.inovkeCurrencyInput = function () {
$(this).change(function () {
var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr("max"));
if (currencyvalue > maxValue) currencyvalue = maxValue;
var minValue = parseFloat($(this).attr("min"));
if (currencyvalue < minValue) currencyvalue = minValue;
currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);
});
};
$(document).ready(function () {
$("input#currencyInput").inovkeCurrencyInput();
});
</script>
</body>
</html>
コードは最初、入力フィールドに 99.9 の値を表示します。 ユーザーが 0.1 および 5000000.0 以外の値を入力すると、それに応じて 0.1 および 5000000.0 の値が設定されます。 それ以外の場合、コードは値を単精度桁に切り上げまたは切り下げて、入力フィールドに表示します。
ユーザーは enter キーを押して値を送信し、丸める必要があります。
このようにして、通常の入力フィールドを、最小値と最大値の制限がある通貨入力フィールドに変換できます。また、ユーザーは、ある精度の桁数まで値を入力できます。
