테스트 사이트 - 개발 중인 베타 버전입니다

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

· 1년 전 · 933 · 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개

1년 전

감사합니다 ^^

1년 전

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

12개월 전

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

12개월 전

감사합니다

게시글 목록

번호 제목
23606
23598
23585
23579
23578
23564
23550
23549
23548
23529
23510
23507
23481
23471
23453
23452
23450
23436
23428
23404
23396
23389
23380
23369
23350
23337
23317
23307
23298
23290