[HTML/jQuery] Input[type="text"]에 숫자만 입력하기

input type을 number로 하면 깔끔하게 숫자만 입력이 가능합니다.

Number 타입은 키보드 방향 버튼으로 숫자를 변경할 수 있는 장점이 있습니다. 그리고 min값과 max값, step을 설정할 수 있습니다.

하지만 단순 수량이 아닌 휴대폰번호, 생년월일 등을 입력할 때에는 input number가 적당하지 않습니다.

왠지 모르게 우리 회사에서는 단순 수량 인풋 타입도 number보다는 text 사용을 선호한다.

 

 

그래서 작성해 보는

input text타입에 숫자만 입력하는 방법

 

코드펜 예제

See the Pen Input[type="text"] number only by sel (@wimmwell) on CodePen.

 

값이 숫자가 아니면 공백으로 대체하는 방식입니다.

 

• oninput: 입력 필드의 값이 변경될 때마다 트리거됩니다. 모든 입력 방식(키보드 입력, 붙여넣기 등)에 반응합니다.
• onkeyup: 키보드 키를 눌렀다가 뗄 때 트리거됩니다. 키보드 입력에만 반응하며, 다른 입력 방식에는 반응하지 않습니다.

PC로 테스트하면 차이를 확인 할 수 있습니다.

1번 oninput은 온 리 숫 자만 입력됩니다

2번은 onkeyup은 숫자가 아닌 텍스트가 입력되면 즉시 공백으로 대체합니다. 텍스트를 입력하면 텍스트가 나타났다가 없어집니다. 복붙하면 텍스트가 그대로 입력이 되어버립니다.

 

728x90