在輸入字段上設置最大和最小限制？

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

您可以根據需要自定義正則表達式