숫자 입력시에 컴마와 소수점 제어하기
<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개
감사합니다 ^^
유용하게 잘쓰겠습니다~감사합니다~
수고하셨습니다. 유용하게 사용될 수 있겠어요
감사합니다
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4427 | ||
| 2514 | 1년 전 | 902 | ||
| 2513 |
베리소프트
|
1년 전 | 619 | |
| 2512 |
|
1년 전 | 950 | |
| 2511 |
|
1년 전 | 1080 | |
| 2510 | 1년 전 | 1007 | ||
| 2509 | 1년 전 | 1058 | ||
| 2508 | 1년 전 | 1309 | ||
| 2507 | 1년 전 | 687 | ||
| 2506 | 1년 전 | 1253 | ||
| 2505 |
|
1년 전 | 1209 | |
| 2504 | 1년 전 | 1411 | ||
| 2503 | 1년 전 | 946 | ||
| 2502 | 1년 전 | 1071 | ||
| 2501 | 1년 전 | 1171 | ||
| 2500 |
welcome
|
1년 전 | 1079 | |
| 2499 |
하늘그루터기
|
1년 전 | 873 | |
| 2498 | 1년 전 | 1178 | ||
| 2497 | 1년 전 | 646 | ||
| 2496 | 1년 전 | 968 | ||
| 2495 |
|
1년 전 | 1419 | |
| 2494 | 1년 전 | 948 | ||
| 2493 | 1년 전 | 947 | ||
| 2492 | 1년 전 | 1156 | ||
| 2491 | 1년 전 | 1120 | ||
| 2490 | 1년 전 | 1091 | ||
| 2489 | 1년 전 | 1022 | ||
| 2488 | 1년 전 | 776 | ||
| 2487 |
|
1년 전 | 1214 | |
| 2486 | 1년 전 | 831 | ||
| 2485 | 1년 전 | 1008 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기