禁用大于 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

您始终可以使用 .native 修饰符访问本机 input 和 change 事件。

您必须应用 .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>