HTML에서 통화 입력 만들기
이 문서에서 사용자는 일반 HTML <input> 필드를 통화 입력 필드로 변환하는 방법을 배웁니다. 목표를 달성하기 위해 HTML과 jQuery를 사용할 것입니다.
JavaScript toFixed() 메서드를 사용하여 일반 <input>을 HTML의 통화 입력으로 변환
HTML에서는 일반 <input> 요소를 사용할 수 있으며 요구 사항에 따라 유형을 설정할 수 있습니다. 유형을 숫자로 설정하는 것만으로는 유형을 통화 입력으로 만들 수 없습니다. 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 키를 눌러 값을 제출하고 반올림해야 합니다.
이러한 방식으로 일반 입력 필드를 최소 및 최대 제한이 있는 통화 입력 필드로 변환할 수 있으며 사용자는 몇 자릿수까지 값을 입력할 수 있습니다.
