HTML에서 통화 입력 만들기

HTML 숫자 입력 필드는 숫자 금액을 입력받고 범위를 제한하며 값이 변경된 뒤 지정한 소수 자릿수로 표시할 수 있습니다. 하지만 HTML에는 내장 통화 입력 유형이 없습니다. type="number"를 추가해도 통화 기호, 자릿수 구분 기호 또는 로캘에 맞는 서식이 적용되지는 않습니다. 아래 예제는 HTML로 숫자를 입력받고 jQuery로 값을 범위 안에 맞춘 뒤 반올림합니다.

type="number"는 통화 서식이 아닙니다

<input type="number">는 브라우저에 숫자 입력 컨트롤을 제공합니다. min, max, step 속성은 허용되는 숫자 값을 지정하며, 브라우저가 숫자 입력용 조작 요소를 표시할 수도 있습니다. 하지만 이 속성들은 금액을 어떻게 표시할지 정하지 않습니다. 예를 들어 99.9는 통화 기호나 로캘별 구분 기호가 없는 숫자로 남습니다.

사용자가 숫자를 입력하고 범위 제한이 유용한 경우 이 컨트롤을 사용하세요. 통화 기호와 자릿수 구분 기호를 포함해 로캘에 맞게 표시하려면 JavaScript의 Intl.NumberFormat 등을 사용해 값을 별도로 서식화해야 합니다. 숫자를 화면에 표시하는 서식 지정과 금액을 정확히 저장하거나 검증하는 일도 서로 다릅니다. 금융 계산에는 정수 단위의 최소 화폐 단위나 십진 산술 라이브러리를 사용하는 경우가 많습니다.

범위와 정밀도 요구사항에 맞춰 숫자 입력 만들기

다음 속성은 시작 값과 예시 최소·최대 값을 지정합니다. 애플리케이션의 요구사항에 맞게 값을 바꾸세요. step="any"는 숫자 입력의 기본 단계 제약인 1을 따를 경우 유효하지 않을 수 있는 소수 값을 허용합니다. 이 속성만으로 값을 소수점 한 자리까지 반올림하지는 않습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

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

JavaScript에서는 유한한 숫자를 이 범위 안으로 조정하고 toFixed() 메서드에 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를 읽고, 유한하지 않은 값은 그대로 둡니다. 유한한 값은 범위 안으로 조정한 다음 소수점 한 자리 문자열로 다시 기록합니다. toFixed(1)은 가장 가까운 10분의 1로 반올림해 문자열을 반환하며, 항상 올림하는 것은 아닙니다. 결과는 숫자를 나타내는 문자열이지 통화 서식이 아닙니다.

통화 입력 전체 예제 사용하기

이 브라우저 페이지 예제는 페이지에서 jQuery를 불러온다고 가정합니다. 사용자 정의 플러그인은 선택한 각 입력 필드에 처리기 하나를 연결합니다. 아래 코드는 앞서 사용한 예시 범위와 시작 값을 그대로 유지합니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

<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으로 설정됩니다. 범위 안의 값은 소수점 한 자리까지 반올림됩니다. 코드가 change 이벤트를 사용하므로 사용자가 입력하는 동안에는 값이 바뀌지 않습니다.

이 예제가 검증하는 것과 검증하지 않는 것

HTML 제약 조건은 허용 범위를 벗어난 값을 브라우저가 식별하도록 돕고, 처리기는 변경 사항이 확정될 때 유한한 값을 범위 안으로 직접 조정합니다. 값이 비어 있거나 유한하지 않으면 사용자가 수정할 수 있도록 그대로 둡니다. 이 예제는 필드를 필수 입력으로 설정하지 않습니다. 그런 값을 거부해야 한다면 별도의 검증 메시지를 추가하고 입력이 유효해질 때까지 제출을 막으세요.

이 동작만으로 제출 데이터가 유효하거나 신뢰할 수 있다고 보장할 수는 없습니다. 서버에서도 값을 검증하고 애플리케이션의 금액 정밀도 및 반올림 규칙을 적용하세요. 여기서 toFixed(1)은 숫자를 소수점 한 자리로 표시하는 방법을 보여주기에 적합하지만, 통화 기호를 추가하거나 자릿수를 구분하거나 로캘을 선택하지 않으며 완전한 금융 표현을 제공하지도 않습니다.