过滤输入文本仅接受数字和点vue.js

为了防止出现多个小数位，在以前的解决方案的基础上，还将v模型传递给函数：

<input v-model="message" v-on:keypress="isNumber($event, message)">

并修改isNumber方法，如下所示：

isNumber(event, message) {
  if (!/\d/.test(event.key) &&  
    (event.key !== "." || /\./.test(message))  
  )  
    return event.preventDefault();  
}

要限制小数点后的位数，请在isNumber方法中添加以下行：

 if (/\.\d{2}/.test(message)) return event.preventDefault();

该\d{2}限制的两位数字的条目。将此更改\d{1}为限制为一个。

如其他答案所述，这不会阻止非数字数据的粘贴。

简短易懂。

的HTML

 <input @keypress="onlyNumber" type="text">

VUE JS

onlyNumber ($event) {
   //console.log($event.keyCode); //keyCodes value
   let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
   if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
      $event.preventDefault();
   }
}

您应该更改输入以type="number"更准确地反映您的行为。然后，您可以使用内置的Vue.js指令v-model.number。

用法：

<input type="number" v-model.number="data.myNumberData"/>