w

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

<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개

감사합니다 ^^

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

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

감사합니다

댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
24-11-04 조회 5,822
24-11-02 조회 5,223
24-10-28 조회 5,605
24-10-24 조회 5,985
24-10-22 조회 6,124
24-10-21 조회 5,690
24-10-20 조회 6,113
24-10-17 조회 6,253
24-10-15 조회 5,057
24-10-14 조회 5,138
24-10-14 조회 4,698
24-10-13 조회 5,145
24-10-11 조회 5,348
24-10-09 조회 5,357
24-10-08 조회 5,271
24-10-07 조회 5,656
24-10-07 조회 5,005
24-10-07 조회 5,673
24-10-07 조회 7,869
24-10-02 조회 5,851
24-10-01 조회 5,095
24-10-01 조회 5,363
24-09-30 조회 5,613
24-09-28 조회 5,339
24-09-26 조회 5,401
24-09-25 조회 5,395
24-09-24 조회 4,731
24-09-21 조회 5,197
24-09-19 조회 5,989
24-09-09 조회 5,227