jQuery를 사용하여 입력 필드에 숫자만 입력되도록 체크하고 입력한 숫자에 천 단위 콤마(쉼표)를 자동으로 추가하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자만 입력 및 천 단위 콤마 자동 추가</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="numberInput" placeholder="숫자를 입력하세요">
<script>
$(document).ready(function() {
$('#numberInput').on('input', function() {
// 숫자만 입력되도록 필터링
let value = $(this).val().replace(/[^0-9]/g, '');
// 천 단위 콤마 추가
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 필드에 업데이트
$(this).val(value);
});
});
</script>
</body>
</html>
설명
- 숫자만 입력 필터링
- value.replace(/[^0-9]/g, '')를 사용하여 숫자가 아닌 모든 문자를 제거합니다.
- 천 단위 콤마 추가
- value.replace(/\B(?=(\d{3})+(?!\d))/g, ',') 정규식을 사용하여 세 자리마다 콤마를 삽입합니다.
이 스크립트를 사용하면 숫자만 입력할 수 있고 입력 시 자동으로 콤마가 추가됩니다.
#jQuery #숫자만입력 #천단위콤마 #천단위콤마자동추가 #정규식 #문자제거정규식 #천단위콤마정규식 #프로그래밍 #조금씩배우는프로그램밍
반응형
'프로그램' 카테고리의 다른 글
| jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 (0) | 2024.11.18 |
|---|---|
| jQuery를 사용하여 이미지를 반응형으로 만드는 방법 (0) | 2024.11.13 |
| jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤 (0) | 2024.10.22 |
| jQuery로 iframe에서 부모 창 함수 호출 (0) | 2024.09.28 |
| jQuery를 사용하여 몇 번째 요소인지 알아내기 (0) | 2024.09.10 |
댓글