w

숫자 입력시에 컴마와 소수점 제어하기

· 2024-11-02 (토) 12:53:31 · 3641 · 4

<input type="text" name="number" class="mask-num decimal-2">
와 같이 input 에 클래스를 통해 컴마와 소수점을 제어합니다.


function numberFormat(number, decimals = 0, decPoint = '.', thousandsSep = ',') {
    number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
    
    let n = !isFinite(+number) ? 0 : +number;
    let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
    
    function toFixedFix(n, prec) {
        let k = Math.pow(10, prec);
        return '' + Math.round(n * k) / k;
    }
    
    let s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, thousandsSep);
    }
    
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    
    return s.join(decPoint);
}

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('input.mask-num').forEach(function(input) {
        // 소수점 자릿수 설정: decimal-1, decimal-2 등의 클래스에서 숫자를 추출
        const decimalMatch = input.className.match(/decimal-(\d+)/);
        const decimalPlaces = decimalMatch ? parseInt(decimalMatch[1], 10) : 0;
        
        // 초기 포맷 적용
        input.value = numberFormat(input.value, decimalPlaces);

        // 입력할 때마다 포맷 적용
        input.addEventListener('input', function() {
            input.value = numberFormat(input.value, decimalPlaces);
        });
    });
});

 

|

댓글 4개

2024-11-03 (일) 05:36:26

감사합니다 ^^

2024-11-05 (화) 09:57:20

유용하게 잘쓰겠습니다~감사합니다~

2024-11-06 (수) 11:04:29

수고하셨습니다. 유용하게 사용될 수 있겠어요

감사합니다

댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
24-12-28 조회 3,570
24-12-26 조회 4,172
24-12-25 조회 3,520
24-12-24 조회 4,062
24-12-24 조회 3,313
24-12-19 조회 3,794
24-12-17 조회 3,600
24-12-17 조회 3,402
24-12-16 조회 3,390
24-12-14 조회 4,018
24-12-14 조회 3,758
24-12-12 조회 3,816
24-12-10 조회 3,574
24-12-03 조회 3,932
24-12-01 조회 3,545
24-11-30 조회 3,657
24-11-29 조회 5,082
24-11-28 조회 3,484
24-11-25 조회 3,291
24-11-22 조회 3,325
24-11-20 조회 3,661
24-11-19 조회 3,295
24-11-16 조회 3,842
24-11-13 조회 3,336
24-11-11 조회 3,813
24-11-09 조회 3,625
24-11-04 조회 4,261
24-11-02 조회 3,642
24-10-28 조회 3,975
24-10-24 조회 4,077