[Jquery] Input 숫자만 입력받기, 최대 글자수 지정하기 (numbers only, max length)

기본적으로 HTM의 input은 tel이라는 타입이 존재하며 maxlength를 설정할 수 있다.

<input id="phoneInput" name="phone" type="tel" placeholder="- 없이 숫자만 입력" minlength="11" maxlength="11">

 

type="tel"을 사용하면 모바일에서 해당 방식으로 표시되며 PC에서는 숫자외에 한글, 영문, 특수문자 등이 입력되지 않는다. 

또한 maxlength 이상으로 숫자를 입력할 수 없다.

 

하지만 이 방식을 통과하는 케이스가 있다. 직접 입력하는 것이 아니라 복사, 붙여넣기를 하거나 자동완성을 이용하는 경우이다.

특수문자가 포함된 자동완성 추천

 

이런 케이스까지 방지하기 위해서는 아래처럼 input에 입력이 들어왔을 때 value를 체크하여 숫자가 아닌 문자를 모두 ""로 바꿔주면 된다.

this.value = this.value.replace(/[^0-9\.]/g,""); 로 바꿔서 사용할 수 있다. 

$("#phoneInput").keyup(function () {
  this.value = this.value.replace(/\D/g, "");
});

 

만약 이렇게 했음에도 불안한 경우 마지막에 FormCheck 등과 같은 함수에서 input의 lenght와 숫자인지 체크한 후 error message를 표시해주면 더 안전하다.

var phone = $("#phoneInput").val();
if (phone.length !== 11 || !$.isNumeric(phone)) {
  result = false;
  $(".js-phoneError").show();
}