[JS] input박스에 숫자만 입력되도록 설정

input박스에서 숫자만 입력되도록 설정

 

 

• type을 number로 지정
• oninput이벤트, 정규식, replace() 활용
• pattern 속성 활용 

 

 

 

 

1. type을 number로 지정

• 숫자만 입력받을 수 있다.

<input type="number"></input>

 

 

 

2. oninput 이벤트, 정규식, replace()함수 

• oninput 이벤트는 input form의 값이 바뀌면 발생한다.
• 숫자만 입력할 수 있는 정규식을 적용하여 숫자가 아닌 값이 입력되면 replace()함수를 이용하여 값을 대체

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

 

 

 

3. pattern 속성 활용

• input에 pattern 속성을 지정하고, 입력한 값을 검증할 정규식을 입력한다.
• css에 input:invalid속성을 지정하면 input 에 입력한 값이 pattern에 맞지 않으면 즉시, css를 적용하여 input 테두리의 색을 변경해준다.

<input type="text" pattern="[0-9]+">

-----------------------------------------
//css
input:invalid {
	border: 3px solid red;
}