[자바스크립트] 입력 필드에서 숫자를 3자리마다 콤마로 포맷하고 소수점을 유지하는 완벽한 방법

웹 애플리케이션에서 숫자를 입력받을 때, 사용자 경험(UX)을 향상시키는 방법 중 하나는 숫자를 입력하는 즉시 3자리마다 콤마를 추가하고 소수점도 올바르게 처리하는 것입니다. 특히 재무, 통계, 또는 계산 관련 애플리케이션에서는 숫자 포맷팅이 매우 중요합니다. 이번 글에서는 소수점을 포함한 숫자 입력 필드에서 실시간으로 포맷을 적용하는 JavaScript 코드를 소개합니다.

---

숫자 포맷팅의 필요성

사용자가 숫자를 입력할 때, 값이 단순히 나열된 숫자라면 큰 값일수록 읽기가 어렵습니다. 예를 들어, "1234567.89"와 "1,234,567.89" 중 어느 쪽이 더 보기 쉽나요? 당연히 후자가 더 직관적입니다.

또한, 숫자 입력 과정에서 소수점이 사라지거나 입력한 값이 이상하게 처리되면 사용자에게 큰 혼란을 줄 수 있습니다. 그래서 숫자 입력 필드를 다룰 때는 사용자가 입력하는 순간부터 자연스럽게 3자리마다 콤마를 추가하고, 소수점과 음수까지 정상적으로 처리하도록 설계하는 것이 중요합니다.

---

JavaScript 코드: 입력값 포맷팅

아래 코드는 숫자를 입력할 때 3자리마다 콤마를 추가하고, 소수점을 유지하며, 음수와 실수를 올바르게 처리합니다. 입력값이 올바른 숫자가 아닌 경우에도 이를 적절히 관리하여 안정적으로 동작합니다.

function inputNumberFormat(obj) {
    // 기존 값 유지
    let value = obj.value;

    // 숫자, 소수점 및 - 이외의 문자는 제거
    value = value.replace(/[^0-9.-]/g, '');

    // 콤마를 제거하고 숫자 포맷팅
    let rawValue = value.replace(/,/g, '');

    // 숫자인지 확인 (소수점 포함)
    if (!isNaN(rawValue) || rawValue === '.') {
        // 소수점이 마지막에 입력된 경우 처리
        if (rawValue.endsWith('.')) {
            obj.value = rawValue; // 포맷팅하지 않고 그대로 유지
            return;
        }

        // 음수일 때의 처리
        if (rawValue.startsWith('-')) {
            rawValue = '-' + formatNumberWithDecimals(rawValue.slice(1));
        } else {
            rawValue = formatNumberWithDecimals(rawValue);
        }

        obj.value = rawValue;
    }
}

// 숫자를 3자리마다 콤마와 소수점 포함 포맷팅
function formatNumberWithDecimals(value) {
    let parts = value.split('.');
    let integerPart = parts[0]; // 정수 부분
    let decimalPart = parts[1] || ''; // 소수 부분

    // 정수 부분에만 3자리마다 콤마 추가
    integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    // 소수 부분이 있으면 결합
    return decimalPart ? integerPart + '.' + decimalPart : integerPart;
}

---

코드 설명

1. inputNumberFormat 함수

이 함수는 사용자가 입력한 값을 처리합니다.

• 입력값 정리: 입력값에서 숫자(0-9), 소수점(.), 음수 부호(-) 이외의 문자를 모두 제거합니다.
• 숫자 검증 및 포맷: 입력값이 유효한 숫자인지 확인한 뒤, 3자리마다 콤마를 추가합니다.
• 소수점 처리: 입력 중 소수점이 마지막에 있는 경우(예: 1234.)에도 값이 사라지지 않고 유지되도록 설계했습니다.

2. formatNumberWithDecimals 함수

이 함수는 숫자를 정수 부분과 소수 부분으로 나누어 각각 포맷합니다.

• 정수 부분 포맷팅: 정수 부분에만 3자리마다 콤마를 추가합니다.
• 소수점 결합: 소수점이 있는 경우, 정수와 소수 부분을 다시 합칩니다.

---

사용법: HTML에 연결하기

이 코드는 HTML <input> 필드에 적용할 수 있습니다. 아래는 사용 예시입니다:

<table>
    <tr>
        <td><input type="text" class="form-control text-center" onkeyup="inputNumberFormat(this);" autocomplete="off"></td>
    </tr>
</table>

여기서 사용자가 숫자를 입력할 때, 입력값은 실시간으로 포맷이 적용됩니다.

---

동작 예시

1. 사용자가 1234567.89를 입력하면, 필드에는 1,234,567.89로 표시됩니다.
2. 음수인 -987654.321을 입력하면 -987,654.321로 표시됩니다.
3. 입력 중 소수점을 입력할 경우(1234.), 그대로 유지됩니다.
4. 입력값이 abcd1234라면, 1234로 변환됩니다.

---

적용 사례

이 코드는 다양한 상황에서 유용하게 사용할 수 있습니다:

• 재무 데이터 입력: 금액 입력 필드에서 자동으로 포맷을 적용해 사용자 경험을 향상.
• 수치 계산 입력: 계산기나 통계 관련 입력 필드에서 값의 가독성을 높임.
• 다국어 지원: toLocaleString 메서드를 활용하면 다른 언어와 지역 설정에도 대응 가능.

---

주의사항

• 소수점 이하 자리수를 제한하고 싶다면, formatNumberWithDecimals 함수에서 추가 로직을 넣어 숫자의 소수점 자릿수를 제어할 수 있습니다.
• 숫자만 입력해야 하는 상황에서는 추가적으로 입력값 검증 로직을 강화할 수 있습니다.

---

위 코드는 간단하면서도 강력한 기능을 제공합니다. 입력값을 다루는 모든 웹 애플리케이션에서 효과적으로 활용할 수 있을 것입니다. 정확한 데이터 입력을 지원하고 사용자 경험을 개선하기 위해 꼭 한 번 적용해보세요!