[Vue.js] input에 숫자만 입력되도록 하는 방법(태그&watch)

이번엔 input에 숫자만 넣는 방법에 대하여 알아보자

보통 전화번호 입력, 계좌번호 입력 등 숫자만 사용되는 항목을 작성할때 사용된다.

숫자만 입력되게 만드려면 많은 방법이 있지만 쉽고 간편해서 특히 자주 사용되는 2가지가 있다.

 

---

 

1. Input 태그에 입력하는 방법

말 그대로 input 태그를 건드려 작성하는 방법이다.

태그를 건드리는 방법도 크게 두가지로 나눠지게 되는데 각각의 장단점을 알려주겠다.

 

<template>
  <div>
    <input type="number" @input="inputNumber($event)">
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{      
      result:'',
    }
  },
  methods:{
    inputNumber(event){
      this.result = event.target.value
    }
  },
}
</script>

실행결과

우선 첫번째로 input의 type을 number로 바꾸는 방법이다.

장점 : 간단함
단점 : maxlength를 사용할 수 없음

장점은 type만 바꿔주면 되는거니 정말 간단하다.

하지만 maxlength를 사용할 수 없다는 것이 제일 큰 단점이다.

예를들어, 전화번호 입력 시 사용자가 실수로 숫자 하나를 더 썼다면 오류가 날 수 밖에 없다. 하지만 글자수 제한이 없기 때문에 개발자가 할 수 있는게 없기 때문에 사용자가 실수를 하지 않도록 바랄 수 밖에 없게된다.

 

<template>
  <div>
    <input type="text" 
     @input="inputNumber($event)"
     oninput="this.value = this.value.replace(/[^0-9.]/g, '')" maxlength="4">
    <div>
      입력결과 : {{this.result}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{      
      result:'',
    }
  },
  methods:{
    inputNumber(event){
      this.result = event.target.value
    }
  },
}
</script>

실행결과

두번째로는 input의 type은 그대로 text지만 oninput을 사용하는 방법이다.

장점 : maxlength를 사용할 수 있다.
단점 : 숫자만 입력 가능하도록 oninput을 추가해야함

코드를 보면 maxlength를 4로 설정을 하여 input에 숫자를 입력할때 4자리까지 밖에 입력이 안된다.

oninput은 숫자만 입력할 수 있도록 설정한 정규식이다.

replace안에 내용은 구글에 정규식이라고 검색하면 자세한 내용이 나온다.

SMALL

---

2. watch를 사용하는 방법

두번째 방법은 watch를 사용하는 방법이다.

watch는 설정한 변수에 변화가 감지되면 자동으로 실행하게 만드는 기능이다.

 

<template>
  <div>
    <input type="text" @input="inputNumber" :value="number">
    <div>
      입력결과 : {{this.number}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{      
      number:'',
    }
  },
  methods:{
    inputNumber(event){
      this.number = event.target.value
    }
  },
  watch:{
    number(val){
      const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/;
      if(reg.exec(val)!==null){
       this.number = val.replace(/[^0-9]/g,'');
      }
    }
  }
}
</script>

실행결과

간단히 설명하자면 input에 입력값이 들어가게되면 미리 만들어 놓은 변수인 number에 값이 들어가게 되고, watch에서 변수 number의 변화를 감지하게 되면 해당 함수가 동작되는 원리이다.

const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/;
if(reg.exec(val)!==null){ this.number = val.replace(/[^0-9]/g,''); }

이부분 과 같은 경우엔 위에서 봤던 정규식의 또 다른 버전이다.

결국 숫자만 입력 가능하도록 만든다는 것은 똑같으니 너무 깊게 파고들 필요는 없다.