728x90
오늘 알아볼 코드는Input Tag에 숫자만 입력할 수 있는 방법을 알아볼 것이다. (*브라우저 기능 상 차이가 있을 수 있음)
많은 방법이 있겠지만, 오늘 총 4가지의 방법을 알아볼 것이다.
1. Type = "Number"로 설정하기. (CSS수정이 없으면 Input박스 옆에 화살표 생김)
2.Type = "Text"로 하되 onKeyPress를 활용하여 Javascript로 number만 입력할 수 있게 수정하기.
3. input시 pattern 속성 활용하기
4. input시 oninput 속성을 활용하여 숫자가 아닐면 replace로 제거하기
- Type = "Number" 방식
<form>
<label> <input type='number'> </label>
<input type='submit'>
</form>
단점
위와 같이 화살표가 보임으로, CSS를 활용해 지워야한다.
- onKeyPress Javascript 방식
<script type=text/javascript>
function checkNumber(event) {
if(event.key >= 0 && event.key <= 9 || event.key === '.' || event.key === '-') {
return true;
}
return false;
}
</script>
<body>
<form>
<label> <input type='text' onkeypress='return checkNumber(event)'> </label>
<input type='submit'>
</form>
</body>단점
한글이 입력된다
- pattern 속성 방식
<label>
<input type="text" pattern="[^\d]*">
</label>
<input type='submit'>
pattern="[^\d]*" 속성은 숫자가 포함되지 않는 문자열을 일치시키는 정규 표현식 패턴을 지정합니다.
단점
숫자 이외의 값은 입력 자체는 된다. 제출하기 전에 경고로 표시되는 방식이다.
- oninput 속성 방식
<script type="text/javascript">
function removeNonNumericCharacters(input) {
input.value = input.value.replace(/\D/g, '');
}
</script>
<label>
<input type="text" id="numberInput" oninput="removeNonNumericCharacters(this)">
<input type='submit'>
</label>단점
필자는 아직 단점을 찾지 못했다.
Form Input 태그에 숫자만 입력할 수 있는 여러가지 방법을 알아보았다. 필요와 편의에 따라 원하는 방법으로 개발하면 될 것같다.
728x90
반응형
'👨💻 프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] 특정 영역 JQuery .hide()활용해 프린트하기 (0) | 2024.02.08 |
|---|---|
| [Javascript] 팝업 띄우기 (window.open) 및 파라미터 파싱 (0) | 2024.02.05 |
| [JavaScript] 특정 영역 내용 출력(인쇄/프린트)하기 (0) | 2024.01.31 |
