키 누르기 vuejs에서는 소수점 2자리 제한이 있는 숫자와 점 하나만 허용

키 누르기 vuejs에서는 소수점 2자리 제한이 있는 숫자와 점 하나만 허용

사용자가 Vue.js를 사용하여 텍스트 상자에 통화와 같은 값을 입력할 수 있도록 허용

작업 예: https://jsfiddle.net/0s14cbqx/

템플릿 내:

<input placeholder="Name a price" v-model="price" @keypress="onlyForCurrency">

js:

data(){
   return{
     price:null
   }
},
methods: {
   onlyForCurrency ($event) {
     // console.log($event.keyCode); //keyCodes value
     let keyCode = ($event.keyCode ? $event.keyCode : $event.which);

     // only allow number and one dot
     if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
      $event.preventDefault();
     }

     // restrict to 2 decimal places
     if(this.price!=null && this.price.indexOf(".")>-1 && (this.price.split('.')[1].length > 1)){
     $event.preventDefault();
     }
   }
}

이와 같이 사용자는 숫자와 점 1개만 입력할 수 있으며 소수점 2자리 이후로는 아무것도 입력할 수 없습니다.

타입 번호의 입력에 대해서는, 다음과 같이 정했습니다.

<input type="number" v-model.number="price" @input="handleInput">

  data () {
    return {
      price: null,
      previousPrice: null
    }
  },

  methods: {
    handleInput (e) {
      let stringValue = e.target.value.toString()
      let regex = /^\d*(\.\d{1,2})?$/
      if(!stringValue.match(regex) && this.price!== '') {
        this.price = this.previousPrice
      }
      this.previousPrice = this.price
    }
  }

사용자의 입력 결과를 확인하는 것입니다.필요한 regex 패턴과 일치하지 않을 경우 다음 명령을 사용하여 데이터를 이전 상태로 리셋합니다.previousPrice. 데모: https://jsfiddle.net/edwardcahyadi/qj9mw5gk/2/

Javascript 라이브러리를 사용하면 매우 효과적입니다.

이를 랩하는 Vue.js 컴포넌트가 있습니다.

또, 와의 연동도 양호합니다.v-text-fieldhttps://codesandbox.io/s/yw07v978mj 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/52685886/only-allow-numbers-and-one-dot-with-2-decimal-places-restriction-in-keypress-vue