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

Question

我遇到了这个问题，我有一个 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 的值。

Answer 1

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

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

Answer 2

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

将 $ref 放在您的字段上

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

然后你可以修改它为mounted

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

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

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

Answer 4

改用onblur以便在输入变得不集中时，代码会运行以将其设置为最大值

Answer 5

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

代码笔

<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
      }
    }
   }
})

Answer 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;
    },

您可以根据需要自定义正则表达式