UX·UI - FrontEnd Dev. Story

프론트엔드/Javascript

[javascript] input 숫자만 입력하는 자바스크립트 / 정규식 방법

클로이겅쥬 2020. 8. 18. 18:11
반응형

 

Inputbox Validtion Numbers Only

 

자바스크립트 방법 중 가장 많이 쓰이는 방법 중 하나가 input 텍스트 박스 내에 숫자만 입력하게 하는 방법이다.

다양한 개발 방법 중 자바스크립트 이용하는 방법과 정규식의 인라인으로 작성하는 방법을 알아보자.

 

 

 

1. 정규식 이용한 방법

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');"/>

 

이렇게 onKeyup 속성을 넣어서 정규식을 입력하면 숫자외에 입력이 되지않는다.

 

 

 

 

 

2. 자바스크립트 이용한 방법

<input type="text" onkeypress="inNumber();"/>
<!--자바스크립트를 불러오는 속성입력-->
function inNumber(){
          if(event.keyCode<48 || event.keyCode>57){
             event.returnValue=false;
          }
}

 

자바스크립트로 키보드 누르는 키를 제어함으로써 숫자만 입력가능하도록 할 수 있다.

 

 

 

반응형