I try like this :

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keydown="disableDot">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }
    }
</script>

If the code executed and I input dot(.), it still can

In dekstop, it had disable. But in mobile, it does not disable

I want to disable dot. So user can not input dot

How can I do it?

Note

In dekstop, the code works. But in mobile, the code does not works. The dot(.) no disable in mobile

I try like this :

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keydown="disableDot">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }
    }
</script>

If the code executed and I input dot(.), it still can

In dekstop, it had disable. But in mobile, it does not disable

I want to disable dot. So user can not input dot

How can I do it?

Note

In dekstop, the code works. But in mobile, the code does not works. The dot(.) no disable in mobile

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuex

Share Improve this question Follow asked Oct 9, 2017 at 6:49 moses tohmoses toh 13.2k8181 gold badges265265 silver badges459459 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The trouble is that the keycodes with 'keydown' or 'keyup' dont seem to be consistent across browsers. Maybe the OS has an affect as well. You can test this on various browsers and mobile devices here

I think you will find more consistency using the v-on:keypress event instead. The following in my quick (inplete on mobile) testing returns '46' consistently. A quick warning, I noticed that typing '.' on firefox mobile on my android keyboard I was receiving two keypress events.

//in template
<input type="number"  v-on:keypress="capturePress($event)">

//in methods
capturePress: function(event) {
    console.log(event.charCode);
}

I would also encourage you to have a look at the whole event as it also returns. event.code = "Period" and event.key = "." though only event.key = "." was filled on mobile firefox.

console.log(event);

Using a watcher worked the best for me. It would be something like this:

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1">
    ...                           
</template>
<script>
    export default{
        ...
        methods:{
            disableDot: function(evt) {
                evt = (evt) ? evt : window.event
                let charCode = (evt.which) ? evt.which : evt.keyCode
                if (charCode === 190 || charCode === 189 || charCode === 187) {
                    evt.preventDefault()
                } 
                else {
                    return true
                }
            }

        }

        watch: {
          "quantity"(value) {
            this.disableDot();
          }
        },
    }
</script>

I found the real issue with android device , You should make disable the autoplete of your form like this:

 <form autoplete="off" action="/action_page.php">