입력 필드에 최대 및 최소 제한을 설정하는 중?

입력 필드에 최대 및 최소 제한을 설정하는 중?

나는 이 문제를 가지고 있는데, 내가 부피 텍스트 필드가 있는 곳에서 최대와 최소 한도를 설정하려고 한다.이제 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="if(Number(this.value) > Number(this.max)) this.value = this.max;"

입력 요소에 속성을 수동으로 넣을 수 있다(이 솔루션이 명확하지 않지만, 사실 hack이라고 할 수 있지만 하기 쉽다).

font color = #86E57F field on your field

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

마운트된 것으로 수정하면

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을 참조하십시오.

이것 또한 데이터 규칙을 사용할 수 있다.

예: 내부 데이터

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>

사용하다onblur대신 입력이 집중되지 않을 때마다 최대값으로 설정하기 위해 코드가 실행된다.

이 문제에 대해서는 감시자를 이용하는 것이 가능하다.그게 가장 좋은 방법인지는 모르겠지만 효과가 있어.

코데펜

<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자리 숫자를 지정하려면 다음과 같이 하십시오.

템플릿

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

필요에 따라 정규식을 사용자 정의할 수 있음

참조URL: https://stackoverflow.com/questions/57063387/setting-max-and-min-limit-on-input-field