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

vue.js Vue.js

GOJim

2020-03-12

我有一个文本框，只想使用Vue.js接受“数字”和“。[点]”，有人可以提供帮助吗？我是新来的。

第1097篇《过滤输入文本仅接受数字和点vue.js》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
前端Tom 2020.03.12

为了防止出现多个小数位，在以前的解决方案的基础上，还将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}为限制为一个。

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

樱LEY神无 2020.03.12

简短易懂。

的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();
   }
}
小胖泡芙 2020.03.12

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

用法：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android