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

Question

我有一个文本框只想接受"数字"和".[点]"使用Vue.js,任何人都可以帮助代码？我是vue的新人.

Answer 1

您可以编写Vue方法,并且可以在keypress事件上调用该方法.看看这个小提琴.

更新:

添加源代码:

HTML

<div id="demo">
  <input v-model="message" @keypress="isNumber($event)">
</div>

Vue.js

var data = {
  message: 1234.34
}

var demo = new Vue({
  el: '#demo',
  data: data,
  methods: {
    isNumber: function(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();;
      } else {
        return true;
      }
    }
  }
});

Answer 2

这是我的解决方案。这里的大多数答案已被弃用。此外，输入值始终返回一个字符串，即使您键入一个数字也是如此。因此，这里的一些解决方案对我不起作用。

在我的情况下，我不想要小数点，但为了这个线程的目的，我将它添加到数组中。

<b-form-input v-model.number="quantity" @keypress="isNumber($event)" type="number"></b-form-input>


isNumber (evt: KeyboardEvent): void {
                const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
                const keyPressed: string = evt.key;
                if (!keysAllowed.includes(keyPressed)) {
                    evt.preventDefault()
                }
            }

Answer 3

简短易懂。

的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();
   }
}

Answer 4

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

用法：

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

Answer 5

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

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

Answer 6

在一行中执行此操作的简单方法：

IsNumber(event) {
  if (!/\d/.test(event.key) && event.key !== '.') return event.preventDefault();
}

Answer 7

我通过vue.js过滤器解决了你的问题.首先我创建了filter - 比如说在filters.js文件中

export const JustDigits = () => {
  Vue.directive('digitsonly', (el, binding) => {
    if (/[\d\.]+/i.test(el.value)) {
      console.log('ok');
    } else {
      let newValue = el.value.replace(/[a-zA-Z]+/ig, '');
      el.value = newValue;
      console.log('should fix', newValue);
      binding.value = el.value;
    }
  });
};

然后在需要此功能的组件中,我做了:

import {
  JustDigits
} from './filters';

JustDigits();

然后你就可以在模板中使用这个指令:

 <input  v-model="myModel"
         v-digitsonly
         type="text"  
         maxlength="4"  class="form-control" id="myModel" name="my_model" />

请注意,我的正则表达式可能与您需要的不同,请随意修改它以及let newValue = el.value.replace(/[a-zA-Z]+/ig, '');从字符串中删除字符的代码行.我发布它只是为了向您展示vue.js提供的解决此类任务的可能解决方案之一.

Answer 8

这是通过使用以下指令设置 v-restrict.number.decimal 来处理所提出的特定问题（仅限数字和“点”）的更好方法。它还有一些奖励代码来支持仅 alpha 或字母数字。您也可以只允许“点”，尽管我不知道您为什么会这样做。如果输入速度快，它将不允许额外的字符“潜入”。它还支持复制/粘贴、删除和其他一些用户希望仍然可以通过输入工作的键：

Vue.directive('restrict', {
  bind (el, binding) {
    el.addEventListener('keydown', (e) => {
      // delete, backpsace, tab, escape, enter,
      let special = [46, 8, 9, 27, 13]
      if (binding.modifiers['decimal']) {
        // decimal(numpad), period
        special.push(110, 190)
      }
      // special from above
      if (special.indexOf(e.keyCode) !== -1 ||
        // Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
        return // allow
      }
      if ((binding.modifiers['alpha']) &&
        // a-z/A-Z
        (e.keyCode >= 65 && e.keyCode <= 90)) {
        return // allow
      }
      if ((binding.modifiers['number']) &&
        // number keys without shift
        ((!e.shiftKey && (e.keyCode >= 48 && e.keyCode <= 57)) ||
        // numpad number keys
        (e.keyCode >= 96 && e.keyCode <= 105))) {
        return // allow
      }
      // otherwise stop the keystroke
      e.preventDefault() // prevent
    }) // end addEventListener
  } // end bind
}) // end directive

使用：

<!-- number and decimal -->
<input
  v-model="test"
  v-ep-restrict.number.decimal
  ...
/>

<!-- alphanumeric (no decimal) -->
<input
  v-model="test2"
  v-ep-restrict.alpha.number
  ...
/>

<!-- alpha only -->
<input
  v-model="test3"
  v-ep-restrict.alpha
  ...
/>

这可以修改为几乎任何场景的基础，这里有一个很好的关键代码列表

Answer 9

我需要我的输入只允许数字，所以不能有e符号、加号、减号或.。Vue 看起来很时髦，并且不会重新@onkeypress触发dot.

这是我对这个问题的解决方案：

<input
  onkeypress="return event.key === 'Enter'
    || (Number(event.key) >= 0
    && Number(event.key) <= 9"
  type="number"
>

我只接受数字，限制从 0 到 9，但我也确实希望在 Enter 上启用表单提交，这将被上述方法排除 - 因此输入。