在输入字段上设置最大和最小限制？答案

【问题标题】：Setting max and min limit on input field?在输入字段上设置最大和最小限制？
【发布时间】：2019-07-16 18:26:40
【问题描述】：

我遇到了这个问题，我有一个 vuetify 文本字段，我正在尝试对其设置最大和最小限制。现在设置 min=0 和 max=10 有效，但似乎您仍然可以粘贴超过 10 的值。

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         type="number"
         min=0
         max=10
         onkeyup="if(this.value > 10) this.value = 10;">    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
    }
  }
 })

使用 onkeyup 有效，但您仍然可以粘贴大于 10 的值，如果单击外部，则会显示大于 10 的值。

【问题讨论】：

使用 oninput 代替
@epascarello 谢谢。问题解决了。如果您想将此添加为答案，我会接受它

标签： javascript vuejs2 vuetify.js

【解决方案1】：

使用 oninput，我不会对值进行硬编码

oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"

【讨论】：

【解决方案2】：

您可以手动将属性放在输入元素上（虽然这个解决方案不清楚，实际上我会称之为hack，但它很容易做到）

将 $ref 放在你的字段上

<v-text-field ref="myfield" ... >

然后就可以修改为挂载了

mounted () {
  const inputElement = this.$refs.myfield.$el.querySelector('input')
  inputElement.min = 0
  inputElement.max = 10
}

您还可以修改任何其他属性，例如 step 或 maxLength（用于文本类型）。参考输入元素APIhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

【讨论】：

如果你想不使用 querySelector，你可以像这样访问输入元素：this.$refs.myfield.$refs.input，v-text-fields 也有一个 $refs 使用了 html 组件

【解决方案3】：

您也可以为此使用数据规则。

例如：内部数据

data(){
organization: "",
      organizationRules: [
        (v) => !!v || "Organization is required",
        (v) =>
          (v && v.length <= 50) ||
          "Organization must be less than 50 characters",
      ],
}

模板内

<template>
<v-text-field
          v-model="organization"
          :counter="50"
          :rules="organizationRules"
          label="Organization"
          required
        ></v-text-field>
</template>

【讨论】：

【解决方案4】：

改用onblur，这样只要输入变得不集中，代码就会运行以将其设置为最大值

【讨论】：

np，这似乎是一个很好的解决方案，可以做同样的事情：D

【解决方案5】：

可以使用观察者来解决这个问题。我不知道这是否是最好的方法，但它有效。

Codepen

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-text-field
         v-model="number"
         type="number"
        min=0
         max=10>    
        </v-text-field>
      </v-layout>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      number: 0
    }
  },
  watch: {
    number (val, old) {
      console.log(val, old)
      if (+val > 10) {
        this.number = 10
      }
    }
   }
})

【讨论】：

有什么方法可以限制用户输入超过 2 或 3 位数字？
@NandKishor 是的，每个逻辑都可以添加到同一个观察者中。

【解决方案6】：

如果你想在小数点前后最多保留 2 位数字，那么这里是实现的

模板


<v-text-field v-model="input" v-on:keyup="handleInput" type="number" oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;" max="99" ></v-text-field>

脚本

 handleInput(e) {
      let stringValue = e.target.value.toString();

      let regex = /^\d{0,2}(?:\.\d{1,2})?$/;
      if (!stringValue.match(regex) && this.budget !== "") {
        this.budget = this.previousPrice;
      }
      this.previousPrice = this.budget;
    },

您可以根据需要自定义regex

【讨论】：