input - 在 keypress vuejs 中只允许数字和一个点有 2 个小数位限制

Question

仅允许用户使用 Vue.js 在文本框中键入值，例如 currency

Answer 1

工作示例: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();
     }
   }
}

这样用户只能输入数字和一个点，不能输入小数点后2位。