禁用大于 3 位数字的按键

Question

我有这个代码，如果输入的位数大于 3，我想阻止用户输入。因此，如果用户写入例如 150 没问题，如果他尝试写入一个 4 位或更多数字的数字：例如 1601，那么代码应该会阻止这种情况。

所以它必须禁用按键。

<template>
  <b-form-input type="number" v-model="number" @input="getPeople(number)">
  </b-form-input>
</template>

<script>
  export default {
    data() {
      return {
        number: "",
      };
    },
    getPeople(text) {
      if (text.length >= 3) {
        text.preventDefault();
      }
    },
  };
</script>

截至目前，代码不起作用，错误内容如下：

 v-on handler: "TypeError: text.preventDefault is not a function"

Answer 1

最好的方法 UI/UX 不是阻止用户输入无效数据，而是告诉他们为什么无效，何时无效。如果您对为什么会这样感兴趣，那么这是一个漫长的讨论，这可能不是概述它的最佳位置。但它归结为：以最大可能的尊重对待您的用户。不允许打字与该原则相矛盾。

回到您的示例，处理它的基本方法是使用 max 属性：

<b-form-input
  type="number"
  v-model="number"
  max="999"
  @input="getPeople(number)" />

如果您想更好地控制验证消息的显示方式以及验证何时触发，您可以使用 BootstrapVue's documentation 中概述的验证插件（因为您使用 BV）。

请注意，您需要更新标记以满足首选验证插件的要求。

如果您（或您的客户）真的想在 input 事件中调用 preventDefault()，根据 BV documentation

You can always access the native input and change events by using the .native modifier.

您必须应用 .native 修饰符才能获得原生 event 作为参数。否则你只会得到 value.

<b-form-input
  type="number"
  v-model="number"
  @input.native="getPeople" />

并将getPeople修改为：

methods: {
  getPeople(event) {
    if (event.target.value >= 1e3) {
      event.preventDefault();
      this.number = 999;
    }
  }
}

看到它工作：

let memory = 0;

new Vue({
  el: '#app',
  data: () => ({
    number: 0
  }),
  methods: {
    getPeople(event) {
      if (event.target.value >= 1e3) {
        event.preventDefault();
        this.number = memory;
      } else {
        memory = event.target.value;
      }
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app" class="m-5">
  <b-form-input type="number" v-model="number" @input.native="getPeople" />
</div>

禁用大于 3 位数字的按键

Disable keypress on numbers greater than 3 digits

javascript

input

keypress

vue.js