Question

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

Answer 1

您可以编写Vue方法，并且可以在 keypress 事件上调用该方法。查看this fiddle。

更新

添加源代码：

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

我通过vue.js过滤器解决了类似你的问题。首先我创建了过滤器 - 让我们说在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 3

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

用法：

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

Answer 4

简短易懂。

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 5

我需要输入仅允许数字，所以没有e符号，正负号或.。 Vue看起来很时髦，并且不会为dot之类的符号重新触发@onkeypress。

这是我解决这个问题的方法：

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

我只接受数字，范围从0到9，但是我也希望在Enter上启用表单提交功能，因此上述方法（即回车）将不包括在内。

Answer 6

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

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

Answer 7

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

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

Answer 8

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

在我的情况下，我不需要小数点，但出于该线程的目的，我将其添加到了数组中。

<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 9

您可以通过简单的html处理

<input type="number">

和您的 app.css

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* this is for Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

样式代码将从您的数字输入字段中删除难看的箭头，是的，它接受点。

Answer 10

您可以使用此库https://www.npmjs.com/package/vue-input-only-number

import onlyInt, { onlyFloat } from 'vue-input-only-number';

Vue.use(onlyInt);
Vue.use(onlyFloat);

<input type="text" v-int>
<input type="text" v-float>

Answer 11

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

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
  ...
/>

可以将其修改为几乎所有情况的基础，并且良好的关键代码列表是here

Answer 12

我不能提供完美的解决方案，因为有些输入工作而不是复制粘贴工作，有些则相反。这个解决方案对我有用。它可以防止输入负数，键入“ e”，复制并粘贴“ e”文本。

我使用mixin，所以我可以在任何地方被追回。

const numberOnlyMixin = {
  directives: {
    numericOnly: {
      bind(el, binding, vnode) {

        // console.log(el, binding);

        // this two prevent from copy&paste non-number text, including "e".
        // need to have both together to take effect.
        el.type = 'number';
        el.addEventListener('input', (e) => {
          // console.log('input', e);
          // console.log(el.validity);
          return el.validity.valid || (el.value = '');
        });

        // this prevents from typing non-number text, including "e".
        el.addEventListener('keypress', (e) => {
          let charCode = (e.which) ? e.which : e.keyCode;
          if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
            e.preventDefault();
          } else {
            return true;
          }
        });
      }
    }
  },
};

export {numberOnlyMixin}

在您的组件中，添加到您的输入中。

<input v-model="myData" v-numericOnly />

Answer 13

<v-text-field class='reqField' label="NUMBER" @keypress="isNumber($event)"></v-text-field>
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 != 9)) {
            evt.preventDefault();
        } else {
            return true;
        }
        `enter code here`
    },
}

Answer 14

为什么不使用vue-the-mask或cleave.js之类的外部掩码库？

例如，通过 vue-the-mask ，您可以轻松地使用其指令，如下所示：

<input type="text" name="some-name" id="some-id" v-model="some.value" v-mask="'##.##.##.##.###'">

Answer 15

有input事件对任何类型的更改（程序或用户类型）做出反应，而这些更改比keypress或keydown更强大。

<input @input="preventInvalidInput">

preventInvalidInput(event) {
  let value = event.target.value;
  // Check if value is number
  let isValid = +value == +value;
    
  if (!isValid) {
    // input event is not cancellable by preventDefault() 
    // so we have to use the below approach to reset the current value to previous one
    var resetEvent = document.createEvent('Event');
    resetEvent.initEvent('input', true, true);
    event.target.value = event.target._value;
    event.target.dispatchEvent(resetEvent);
  }
}

Answer 16

只需评估是否为 nan，现在您可以防止默认

<input @keypress="isNumber">

isNumber (val) {
  if (isNaN(Number(val.key))) {
    return val.preventDefault();
  }
}

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

16 个答案:

HTML

Vue.js