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/

Meantime

Where is b-input from? – Ritualist

b-input is from buefy buefy.github.io/documentation/input – Meantime

You can use the @input.native event and prevent the event if it's not a number. – Ritualist

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>

Tollbooth

The best answer! – Meantime

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, '');
        }
    }
}

Thessalonians

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, '');
}

Wasteland

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>

Doi

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

Seditious

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

Tees

The OP is using Vue.js, not jQuery? – Ritualist

sorry i don't know vue.js but same kind of solution can try & implement right in change event, it may be useful – Tees

Your solution also completely removes the input once an invalid character is entered which I don't think is the intended behavior. – Ritualist

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'
                ]
            }
        };
    }
};

Locality