Filter input text to enter only number and not even decimal

Question

My goal is for the user to only enter number from [0-9] not even decimal is allowed

How to do that?

The code

<b-input expanded
    type="number"
    v-model="amount"
    @input="updateValue()"
    placeholder="{{ amount }}">
</b-input>

The <b-input> is from buefy https://buefy.github.io/documentation/input/

Answer 1

From the Beufy doc, I get that <b-input> is essentially an extension of native <input> field so it accepts attribute that the native input would accept.

As of now, it is not possible to completely filter out specific characters using pure HTML attributes like pattern="\d+".

What you can do is to use a "keydown" event listener to filter out these characters using native event.preventDefault() by respective keys. Of course, we could use the native <input type="number"> to help in general.

const app = new Vue({
  el: '#app',
  methods: {
    filterKey(e){
      const key = e.key;

      // If is '.' key, stop it
      if (key === '.')
        return e.preventDefault();
      
      // OPTIONAL
      // If is 'e' key, stop it
      if (key === 'e')
        return e.preventDefault();
    },
    
    // This can also prevent copy + paste invalid character
    filterInput(e){
      e.target.value = e.target.value.replace(/[^0-9]+/g, '');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input
    type="number"
    step="1"
    min="0"
    
    @keydown="filterKey"
    // OR 
    @input="filterInput"
  >
</div>

Answer 2

I have just started using vue js so i don't have much knowledge but i think you can add an event listener and use reg ex in your function

<input type="number" @input="checknum">

export default{
    methods: {
        checknum: function (event) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
    }
}

Answer 3

You can call a function on keyup event and check all the non-numeric characters and remove from the value. For Example:

// In template add this line
  <input type="text" v-model="inputNumber" @keyup="onlyNumeric" />
// Define inputNumber in data.
// In Methods add onlyNumeric function
  onlyNumeric() {
     this.inputNumber = this.inputNumber.replace(/[^0-9]/g, '');
}

Answer 4

Template

<input type="number" 
v-model="amount" 
@input="updateValue" 
placeholder="amount" />

Script

<script>

export default {
     data() {
         return {
            amount: null,
         }
     },
     methods: {
         updateValue(e) {
             e.target.value = e.target.value.replace(/[^0-9]+/g, '')
         }
     }
}

</script>

Answer 5

I don't know sometime people doesn't understand, what needed is buefy input which type is text, because on default it must empty string, but when input value its only accept number, this is my answer:

Input tag:

<b-input
  type="text"
  v-model="onlyNumber"
  :placeholder="'Input only number example: 345678'"
  @keypress.native="isNumber($event)"
/>

script:

  data() {
    return {
      onlyNumber: '',
    };
  },
  methods: {
    isNumber(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
          evt.preventDefault();
      }
      return true;
    },
  },

Pros : default is empty string, but only accept number

Const : accepted number will settled as string of number example : "333214234", just convert to number if you have need on number form

Answer 6

Sample code

 $('#numberfield').on('input', function(event) {
console.log(parseInt(event.target.value))
event.target.value = parseInt(event.target.value);

 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="numberfield" type="number"  />

Answer 7

If you are using Vuetifyjs, you could use rules directive as below:

Template

<v-textfield type="number" v-model="amount" 
      :rules="theForm.myRules" placeholder="{{amount}}"> </v-textfield>

Script

    export default {
    data() {
        return {
            amount: null,
            theForm: {
                myRules: [
                    v => /[^0-9]/.test(v) || 'Input Invalid'
                ]
            }
        };
    }
};