728x90
반응형
안녕하세요, 이번 포스팅은 자바스크립트 정규표현식을 이용하여 숫자만 입력할 수 있는 numberOnly함수를 구현하려고 합니다.
먼저, 핵심 코드입니다.
<script>
window.onload = function() {
document.getElementById("number").onkeyup = function(e) {
if( document.getElementById("number").value != "" && e.keyCode == 13) {
// e.keyCode 는 엔터키를 의미합니다.
alert("값 : " + document.getElementById("number").value);
} else {
document.getElementById("number").value = numberOnly(document.getElementById("number").value);
}
}
}
function numberOnly(input) {
return input.replace(/[^0-9]/g,"");
}
</script>
1. 입력 폼을 만듭니다.
<body>
<span>숫자만 : </span>
<input type="text" id="number" name="number" />
</body>
2. 스크립트를 작성합니다.
<script>
window.onload = function() {
document.getElementById("number").onkeyup = function(e) {
if( document.getElementById("number").value != "" && e.keyCode == 13) {
alert("값 : " + document.getElementById("number").value);
} else {
document.getElementById("number").value = numberOnly(document.getElementById("number").value);
}
}
}
function numberOnly(num) {
return num.replace(/[^0-9]/g, "");
}
</script>
3. 실제로 숫자 외에 다른 것을 입력하면 방지됩니다.
숫자만 :
숫자를 입력하고 엔터를 치시면 알림창이 나옵니다.
728x90
반응형
'javascript, jQuery > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 자주 쓰는 이스케이프(escape) 문자 활용 (0) | 2020.11.29 |
|---|---|
| [javascript] table rowIndex를 이용하여 동적 테이블 생성, 삭제 구현 (0) | 2020.11.24 |
댓글