vue에서 숫자만 입력하기

<b-form-input v-model="box.cmcdValu" type="number" min="1" max="100" 
              :state="validateRatio(box.cmcdValu)" @keypress="isNumber($event)"
/>

 

type은 number고정, min과 max로 범위지정 후 0-9가 아닌 경우에는 입력을 방지하는 메서드 사용.

 

 

charCode 변수는 키보드 입력의 키 코드를 저장

 

if 조건문에서 charCode === 46 은 (소수점)을 허용하는 경우.

charCode < 48와 charCode > 57는 ASCII 코드에서 숫자(0-9)에 해당하지 않는 키.

숫자가 아닌 키가 입력되면 event.preventDefault();가 호출되어 해당 입력이 무시됨

 

 

isNumber (event) {
    const charCode = (event.which) ? event.which : event.keyCode;
    //숫자(0-9)가 아닌 경우를 확인
    if (charCode === 46 || charCode > 31 && (charCode < 48 || charCode > 57)) {
        event.preventDefault();
    }
},