Bootstrap vue 输入类型="number"

Question

创建 type="number" 输入时，它会得到 '+' 或 '-' 字符。我想阻止它。然而，当我试图观察输入值的每个状态变化时，它不显示“+”或“-”字符。

输入：

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

观看：

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

例如，当我在输入中写入“564+-”时，手表只能跟随“564”。如何防止减号和加号？

Answer 1

您可以通过使用keydown事件取消无效输入的键盘事件来实现。

演示：

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>

Bootstrap vue 输入类型="number"

Bootstrap vue input type="number"

vue.js

vuejs2

bootstrap-vue