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

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

示例代码

 $('#numberfield').on('input', function(event) {
console.log(parseInt(event.target.value))
event.target.value = parseInt(event.target.value);

 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="numberfield" type="number"  />

Answer 2

我刚开始使用 vue js，所以我的知识不多，但我认为你可以添加一个事件监听器并在你的函数中使用 reg ex

<input type="number" @input="checknum">

export default{
    methods: {
        checknum: function (event) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
    }
}

Answer 3

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

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

完全过滤掉特定字符

你可以做的是使用 "keydown" 事件侦听器使用原生 event.preventDefault() by respective 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>

Answer 4

您可以在 keyup 事件上调用函数并检查所有非数字字符并从值中删除。例如：

// In template add this line
  <input type="text" v-model="inputNumber" @keyup="onlyNumeric" />
// Define inputNumber in data.
// In Methods add onlyNumeric function
  onlyNumeric() {
     this.inputNumber = this.inputNumber.replace(/[^0-9]/g, '');
}

Answer 5

模板

<input type="number" 
v-model="amount" 
@input="updateValue" 
placeholder="amount" />

脚本

<script>

export default {
     data() {
         return {
            amount: null,
         }
     },
     methods: {
         updateValue(e) {
             e.target.value = e.target.value.replace(/[^0-9]+/g, '')
         }
     }
}

</script>

Answer 6

如果您使用 Vuetifyjs，您可以使用 rules 指令，如下所示：

模板

<v-textfield type="number" v-model="amount" 
      :rules="theForm.myRules" placeholder="{{amount}}"> </v-textfield>

脚本

    export default {
    data() {
        return {
            amount: null,
            theForm: {
                myRules: [
                    v => /[^0-9]/.test(v) || 'Input Invalid'
                ]
            }
        };
    }
};

Answer 7

我不知道有时候人们不明白，需要的是buefy input 哪种类型是文本，因为默认情况下它必须是空字符串，但是当输入值只接受数字时，这是我的答案：

输入标签：

<b-input
  type="text"
  v-model="onlyNumber"
  :placeholder="'Input only number example: 345678'"
  @keypress.native="isNumber($event)"
/>

脚本：

  data() {
    return {
      onlyNumber: '',
    };
  },
  methods: {
    isNumber(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
          evt.preventDefault();
      }
      return true;
    },
  },

优点：默认为空字符串，但只接受数字

Const : 接受的数字将被结算为数字字符串示例："333214234"，如果您需要数字形式，只需转换为数字

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

Filter input text to enter only number and not even decimal

javascript

vue.js

buefy