Bootstrap vue input type="number"-CodePudding

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?

CodePudding user response：

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 >
    <div>
      <div>With key handler:</div>
      <input type="number" v-model="port" @keydown="portKeydown($event)" />
    </div>
  </div>
</div>