CODEWITHSUNDEEP
javascriptvue.jsbuefy
sinusGob
sinusGob

Reputation: 4313

Filter input text to enter only number and not even decimal

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/

Upvotes: 6

Views: 17219

Answers (7)

Ario Setiawan
Ario Setiawan

Reputation: 23

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

Upvotes: 0

Samidjo
Samidjo

Reputation: 2355

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

Upvotes: -1

bhavinjr
bhavinjr

Reputation: 1763

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>

Upvotes: 0

Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 2672

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

Upvotes: 0

yqlim
yqlim

Reputation: 7090

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>

Upvotes: 8

Ravi
Ravi

Reputation: 173

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

Upvotes: 1

Satheesh
Satheesh

Reputation: 171

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

Upvotes: -1

Related Questions