首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否设置输入字段的最大和最小限制?

是否设置输入字段的最大和最小限制?
EN

Stack Overflow用户
提问于 2019-07-17 02:26:41
回答 5查看 18.5K关注 0票数 4

我遇到了这个问题,我有一个vuetify文本字段,我正在尝试设置它的最大和最小限制。现在,设置min=0和max=10可以工作,但似乎仍然可以粘贴大于10的值。

这是一个codepen

代码语言:javascript
复制
<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的值。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2019-07-17 02:34:44

使用oninput,我就不会硬编码值

代码语言:javascript
复制
oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"
票数 4
EN

Stack Overflow用户

发布于 2020-05-20 16:58:36

您可以手动将属性放在input元素上(虽然这个解决方案不清楚,但实际上我可以称之为hack,但它很容易做到)

将$ref放在您的字段中

代码语言:javascript
复制
<v-text-field ref="myfield" ... >

然后,您可以在挂载时对其进行修改

代码语言:javascript
复制
mounted () {
  const inputElement = this.$refs.myfield.$el.querySelector('input')
  inputElement.min = 0
  inputElement.max = 10
}

还可以修改任何其他属性,如stepmaxLength (用于文本类型)。参考输入元素接口https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

票数 2
EN

Stack Overflow用户

发布于 2020-08-04 18:06:50

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

例如:内部数据

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

内部模板

代码语言:javascript
复制
<template>
<v-text-field
          v-model="organization"
          :counter="50"
          :rules="organizationRules"
          label="Organization"
          required
        ></v-text-field>
</template>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57063387

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档