Bootstrap vue input type="number"

Question

When creating type="number" input, it getting '+' or '-' characters. I want to prevent it. However when I tried to watch every state changed on input value, it does not show '+' or '-' characters.

input:

  <b-form-input   
      v-model="port"
      type="number"             
     >

and watch:

watch: {
    port(val){
      console.log("val ", val)
    }
  },

For example when I write '564+-' to the input then the watch just can follow '564'. How can prevent minus and plus characters?

Answer 1

You can achieve it by cancel the keyboard event for invalid input using keydown event.

Demo :

new Vue({
  el: "#app",
  data: {
    port: "",
  },
  methods: {
    portKeydown(e) {
      if (/^\+$/.test(e.key)) {
        e.preventDefault();
      }
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="demo">
    <div>
      <div>With key handler:</div>
      <input type="number" v-model="port" @keydown="portKeydown($event)" />
    </div>
  </div>
</div>