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

Question

i am having this issue where i have a vuetify text-field and i am trying to set a max and min limit on it. Now setting min=0 and max=10 works but seems like you could still paste values more than 10.

Here's a codepen

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

Using the onkeyup works but you can still paste values greater than 10 and if you click outside, the value greater than 10 shows up.

Answer 1

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

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

Answer 2

You can put attributes on input element manually (although this solution is not clear, in fact i would call it hack, but it's easy to do)

Put $ref on you field

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

and then you can modify it as mounted

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

You can also modify any other attribute like step , or maxLength (for text type). Refer input element API https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer 3

You can use data rules for this as well.

Eg: Inside data

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

Inside template

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

Answer 4

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

Answer 5

It is possible to use a watcher for this issue. I don't know if It is the best way but It works.

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

Answer 6

If you want to have maximum 2 digits before and after the decimals then here's the implementation for that

template

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

script

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

you can customize the regex according to your need