[Javascript] input 글자수 체크하기

1. type text/ tel

<input type="text" class="userName" maxlength="20" placeholder="성함을 입력해주세요.">
<input type="tel" class="userPhone" maxlength="11" placeholder="전화번호를 입력해주세요.">

간단하게 설정가능

2. type number

//html
<input type="tel" class="userPhone" maxlength="11" placeholder="전화번호를 입력해주세요." oninput="maxLengthCheck(this)">

//js
//숫자 maxLength check
function maxLengthCheck(object){
  if (object.value.length > object.maxLength){
    object.value = object.value.slice(0, object.maxLength);
  }    
}

 

tel 이나 number으로 type을 설정할경우,

mobile에서 input focus되면 숫자키보드만 뜬다. ( text같은경우엔, 자판까지 뜬다. )