w

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

· 2024-11-02 (토) 12:53:31 · 2783 · 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 조회 2,592
24-12-26 조회 3,237
24-12-25 조회 2,642
24-12-24 조회 3,194
24-12-24 조회 2,481
24-12-19 조회 2,933
24-12-17 조회 2,745
24-12-17 조회 2,557
24-12-16 조회 2,580
24-12-14 조회 3,147
24-12-14 조회 2,926
24-12-12 조회 2,929
24-12-10 조회 2,712
24-12-03 조회 3,078
24-12-01 조회 2,687
24-11-30 조회 2,803
24-11-29 조회 4,212
24-11-28 조회 2,648
24-11-25 조회 2,466
24-11-22 조회 2,515
24-11-20 조회 2,824
24-11-19 조회 2,445
24-11-16 조회 2,988
24-11-13 조회 2,490
24-11-11 조회 2,970
24-11-09 조회 2,748
24-11-04 조회 3,411
24-11-02 조회 2,784
24-10-28 조회 3,163
24-10-24 조회 3,160