HTML input number maxLength 설정하기

> type tel

숫자만 입력 X

maxlength 적용O

> type number

숫자만 입력 O

maxlength 적용 X

---

이중에서 number 속성을 가지고 최대 길이(maxLength)를 설정하는 방법을 정리해보고자 한다.

 

solution 1

oninput상태일 때 slice하는 방법인데, 핸드폰 번호 4자리를 잘라낼때 유용하게 사용할 수 있을 듯!

<input type="number" maxlength="4" oninput="maxLengthCheck(this)" />

function maxLengthCheck(object){
  if (object.value.length > object.maxLength){
    object.value = object.value.slice(0, object.maxLength);
  }    
}

 

solution 2

스택오버플로우에서 찾은 Vue solution으로 잘 동작하니 참고해보는 것도 좋을 것 같다!

<input v-model="amount" type="number">

<input v-model="amount"
  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  type = "number"
  maxlength = "10"
/>