javascript - 过滤输入文本以仅输入数字而不是小数

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> 的扩展字段，因此它接受 native 输入将接受的属性。

截至目前，使用像 pattern="\d+" 这样的纯 HTML 属性是不可能完全过滤掉特定字符的。 .

您可以做的是使用“keydown”事件监听器使用原生 event.preventDefault() 过滤掉这些字符通过各自keys .当然，我们可以使用原生的 <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>