Filter input text only accept number and dot vue.j

Question

i have a text box only want accept "Number" and ".[dot]" using Vue.js, anyone can help the code? i'm new on vue.

Answer 1

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

You can write a Vue method and that method can be called on the keypress event. Check out this fiddle.

Update:

adding source code:

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 3

I needed my input to allow only digits, so no e symbol, plus, minus or or .. Vue seems funky and doesn't re-trigger @onkeypress for symbols like dot.

Here is my solution to this problem:

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

I am taking digits only, limiting from 0 to 9, but also I do want enable form submit on Enter, which would be excluded with the above approach - thus the enter.

Answer 4

You should change your input to type="number" to more accurately reflect your behaviour. You can then use the built-in Vue.js directive v-model.number.

Usage:

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

Answer 5

A simple way to do this in one line:

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

Answer 6

I cannot the perfect solution as some work for inputing but not for copy&paste, some are the other way around. This solution works for me. It prevents from negative number, typing "e", copy&paste "e" text.

I use mixin so I can be resued anywhere.

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}

In your component, add to your input.

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