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

到目前为止，使用纯 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>

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

您可以在 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 4

模板

<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 5

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

输入标签：

<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”，如果您需要数字形式，只需转换为数字

Answer 6

示例代码

 $('#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 7

如果您使用的是 Vuetifyjs，则可以使用如下规则指令：

模板

<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'
                ]
            }
        };
    }
};