Javascript - input 태그 입력 제한(숫자만, 한글만, 영문만 등)

키보드 입력시 유효성 검사를 위해 키보드 입력 제한을 처리할 필요가 있다.

 

간단하게 입력 제한을 막는 방법으로 속성값에 처리하는 방법이 있다.

 

$(document).on("keyup", "input[속성명 지정]", function() {$(this).val( $(this).val().replace( 정규식 ,"") );})

 

이러한식으로 키보드 입력이 있을때 input 태그에 지정한 속성이 있으면 정규식에 따라 처리하는 방법이다.

 

ex) 숫자만 입력

-Javascript

$(document).on("keyup", "input[numberOnly]", function() {$(this).val( $(this).val().replace(/[^0-9]/gi,"") );})

-HTML

<input type="text" value="" class="number" numberOnly/>

numberOnly속성이 추가된 input태그에는 치환처리로 인해 더이상 숫자외에는 입력이 불가하다.

 

 

ex) 숫자 및 '-' 하이픈만 입력받기

$(document).on("keyup", "input[telOnly]", function() {$(this).val( $(this).val().replace(/[^0-9-]/gi,"") );})

 

ex) 특수문자 중에 쉼표만 허용하기

$(document).on("keyup", "input[commasOnly]", function() {$(this).val( $(this).val().replace(/[<>(){}[\]\-_=+|\/\\'\;.:\"`~!?@#$%^&*]/gi,"") );})

 

ex) 한글, 영문, 숫자만 받기

$(document).on("keyup", "input[noSpecial]", function() {$(this).val( $(this).val().replace(/[^ㄱ-힣a-zA-Z0-9]/gi,"") );})

 

정규식에 따라 자유롭게 수정하여 사용할 수 있다.