첫번째 방법
input type을 "number" 로 지정합니다.
<input type="number"></input>
두번째 방법
자바스크립트(Javascript)로 컨트롤 합니다.
<script type="text/javascript">
function checkNumber(event) {
if(event.key === '.'
|| event.key === '-'
|| event.key >= 0 && event.key <= 9) {
return true;
}
return false;
}
</script>
<input type='text' onkeypress='return CheckNum(key)'>
input 박스에 키를 입력할때 CheckNum 함수를 이용하여
숫자만 입력 가능하게 제어합니다.
세번째 방법
정규식 이용하기
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
"oninput" 함수는 데이터를 입력할때 바로 데이터를 확인하거나 특정 이벤트를 줄때 사용합니다.
구글에 oninput 함수 검색하면 수두룩하게 나오니 궁금하신분들은 다시한번 검색해보시기 바랍니다.
그리고 만약 숫자가 아닌 다른 값이 입력되면 replace() 함수로 값을 대체합니다.
이런식으로 숫자만 입력가능하게 하는 방법을 알려드렸습니다.
저도 매번 찾아서 하다보니 귀찮아서 그냥 제 블로그에 올려서 보려다보니 이렇게 블로깅을 하게되었네요. ㅋ