过滤输入文本以仅输入数字，甚至不输入小数

Question

我的目标是让用户只输入 [0-9] 中的数字，甚至不允许使用小数

怎么做？

编码

<b-input expanded
    type="number"
    v-model="amount"
    @input="updateValue()"
    placeholder="{{ amount }}">
</b-input>

该<b-input>是buefy https://buefy.github.io/documentation/input/

Answer 1

从Beufy doc，我得到它<b-input>本质上是原生<input>字段的扩展，因此它接受原生输入将接受的属性。

截至目前，使用纯 HTML 属性（如pattern="\d+".

您可以做的是使用“keydown”事件侦听器event.preventDefault()通过相应的键使用本机过滤掉这些字符。当然，我们一般可以使用本机<input type="number">来提供帮助。

const app = new Vue({
  el: '#app',
  methods: {
    filterKey(e){
      const key = e.key;

      // If is '.' key, stop it
      if (key === '.')
        return e.preventDefault();
      
      // OPTIONAL
      // If is 'e' key, stop it
      if (key === 'e')
        return e.preventDefault();
    },
    
    // This can also prevent copy + paste invalid character
    filterInput(e){
      e.target.value = e.target.value.replace(/[^0-9]+/g, '');
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input
    type="number"
    step="1"
    min="0"
    
    @keydown="filterKey"
    // OR 
    @input="filterInput"
  >
</div>