1

I try like this :

<template> 
    ...
    <input type="number" class="form-control" v-model="quantity" min="1" v-on:keyup="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) {
                    evt.preventDefault()
                } 
                else {
                    return true;
                }
            }

        }
    }
</script>

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

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

How can I do it?

moses toh
  • 12,344
  • 71
  • 243
  • 443
  • you should use regex validation for that. – Vipul Singh Oct 09 '17 at 05:37
  • 1
    you can [check here](https://stackoverflow.com/a/469362/5081877), to allow input with required charecters. for html5 use [`pattern[0-9]`](https://stackoverflow.com/a/13952761/5081877) and [replace method](https://stackoverflow.com/a/35592412/5081877) – Yash Oct 09 '17 at 05:44
  • 1
    Simply use `v-on:keydown` instead of `keyup`. Other than that, your code is fine – Phil Oct 09 '17 at 05:47
  • @Phil, `v-on:keydown` in mobile not working. In mobile, it can still input dot. Should not be – moses toh Oct 09 '17 at 07:00
  • @Yash, `keydown` in mobile not working. `pattern` not working in `input type number` – moses toh Oct 09 '17 at 07:03
  • can you provide code snippet or jsfiddle, So that we may resolve it. – Yash Oct 09 '17 at 07:41
  • @Yash, Look at this. http://jsfiddle.net/Lm2hS/4559/. You try it on your mobile. It still input dot – moses toh Oct 09 '17 at 10:21

1 Answers1

4

I don't know it can help, but this is my solution for your question.

new Vue({
  el: '#app',
  data: {
    quantity: ''
  },
  methods: {
    disableDot (e) {
      if (e.charCode === 46) {
        e.preventDefault()
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<div id="app">
  <input type="number" v-model="quantity" @keypress="disableDot"/>
</div>
Ryosuke Suzuki
  • 101
  • 1
  • 5
  • Why did you change your answer? Your first answer using `watch` is correct. Your second answer do not use `input type="number"`. I want using `input type="number"`. No `input type="text"` – moses toh Oct 09 '17 at 13:57
  • if your press double `dot` in `input type=number`, quantity will be NaN. so it is not good solution. And another way to make it works is to define at least one variable - `oldQuantity`, but this will be complex. And using `watch` causes never ending loop because of changing value with self watching. – Ryosuke Suzuki Oct 09 '17 at 15:53
  • But, I found very nice solution and it will works with mobile. – Ryosuke Suzuki Oct 09 '17 at 15:55
  • I also want to change it using `input type="text"`. But this is request from my client – moses toh Oct 09 '17 at 16:04
  • How about the edited code snippet? it uses `input type="number"`, and works fine :) – Ryosuke Suzuki Oct 09 '17 at 16:12
  • It does not work. You try this fiddle : https://jsfiddle.net/50wL7mdz/67396/ on your mobile. Seems mobile not support `keypress` – moses toh Oct 09 '17 at 16:21
  • it works for me on my mobile - iPhone 8 plus, iOS11. I don't know why it does not work on your mobile. – Ryosuke Suzuki Oct 09 '17 at 16:31