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

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 的值。

原文由 TreeHuggerRick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 epascarello 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以手动将属性放在输入元素上（虽然这个解决方案不清楚，事实上我会称之为 hack，但它很容易做到）

将 $ref 放在你的字段上

<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

原文由 farincz 发布，翻译遵循 CC BY-SA 4.0 许可协议