是否设置输入字段的最大和最小限制？
是否设置输入字段的最大和最小限制？
提问于 2019-07-17 02:26:41
我遇到了这个问题，我有一个vuetify文本字段，我正在尝试设置它的最大和最小限制。现在，设置min=0和max=10可以工作，但似乎仍然可以粘贴大于10的值。
这是一个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 {
}
}
})使用onkeyup可以工作，但您仍然可以粘贴大于10的值，如果您单击外部，则会显示大于10的值。
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-07-17 02:34:44
使用oninput，我就不会硬编码值
oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"Stack Overflow用户
发布于 2020-05-20 16:58:36
您可以手动将属性放在input元素上(虽然这个解决方案不清楚，但实际上我可以称之为hack，但它很容易做到)
将$ref放在您的字段中
<v-text-field ref="myfield" ... >然后，您可以在挂载时对其进行修改
mounted () {
const inputElement = this.$refs.myfield.$el.querySelector('input')
inputElement.min = 0
inputElement.max = 10
}还可以修改任何其他属性，如step或maxLength (用于文本类型)。参考输入元素接口https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
Stack Overflow用户
发布于 2020-08-04 18:06:50
您也可以为此使用数据规则。
例如:内部数据
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57063387
复制相关文章
相似问题
腾讯云开发者
