entityMap|blocks|key|cc07i|text|请改用onblur，这样每当输入变得不受关注时，代码就会运行以将其设置为最大值|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|23g3h^0|3|6|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@$A|I|B|J|C|D]]|E|@]|F|$]]|$2|G|4|-4|6|7|8|K|9|@]|E|@]|F|$]]]]

Use <code>onblur</code> instead so anytime the input becomes unfocused the code runs to set it to the max

entityMap|blocks|key|3oldc|text|使用oninput，我就不会硬编码值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|c6ab4|oninput="if(Number(this.value)+>+Number(this.max))+this.value+=+this.max;"|code-block|syntax|javascript|ja2j^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

Use oninput and I would not hardcode the values

<pre><code>oninput="if(Number(this.value) &gt; Number(this.max)) this.value = this.max;"
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/cbertelegni/pen/RzXYOp?editors=1111|blocks|key|fn6b|text|可以使用观察器来解决此问题。我不知道这是不是最好的方法，但它是有效的。|unstyled|depth|inlineStyleRanges|entityRanges|1afje|Codepen|offset|length|3k5ot|<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+(%2Bval+>+10)+{
++++++++this.number+=+10
++++++}
++++}
+++}
})|code-block|syntax|javascript|blj31^0|0|0|7|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|S|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|T|G|@]|H|@$K|U|L|V|A|W]]|6|$]]|$A|M|C|N|2|O|F|X|G|@]|H|@]|6|$P|Q]]|$A|R|C|-4|2|E|F|Y|G|@]|H|@]|6|$]]]]

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

<a href="https://codepen.io/cbertelegni/pen/RzXYOp?editors=1111" rel="nofollow noreferrer">Codepen</a>

<pre><code>&lt;div id="app"&gt;
 &lt;v-app id="inspire"&gt;
 &lt;v-container&gt;
 &lt;v-layout row wrap&gt;
 &lt;v-text-field
 v-model="number"
 type="number"
 min=0
 max=10&gt; 
 &lt;/v-text-field&gt;
 &lt;/v-layout&gt;
 &lt;/v-container&gt;
 &lt;/v-app&gt;
&lt;/div&gt;

new Vue({
 el: '#app',
 data() {
 return {
 number: 0
 }
 },
 watch: {
 number (val, old) {
 console.log(val, old)
 if (+val &gt; 10) {
 this.number = 10
 }
 }
 }
})
</code></pre>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement|blocks|key|8regg|text|您可以手动将属性放在input元素上(虽然这个解决方案不清楚，但实际上我可以称之为hack，但它很容易做到)|unstyled|depth|inlineStyleRanges|entityRanges|i3vr|将$ref放在您的字段中|eihnh|<v-text-field+ref="myfield"+...+>|code-block|syntax|javascript|bjf2h|然后，您可以在挂载时对其进行修改|egaik|mounted+()+{
++const+inputElement+=+this.$refs.myfield.$el.querySelector('input')
++inputElement.min+=+0
++inputElement.max+=+10
}|fs7jg|还可以修改任何其他属性，如step或maxLength+(用于文本类型)。参考输入元素接口https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement|offset|length|style|CODE|ak8gi^0|0|0|0|0|0|D|4|I|9|19|1T|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|10|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|11|G|@]|H|@]|6|$]]|$A|K|C|L|2|M|F|12|G|@]|H|@]|6|$N|O]]|$A|P|C|Q|2|E|F|13|G|@]|H|@]|6|$]]|$A|R|C|S|2|M|F|14|G|@]|H|@]|6|$N|O]]|$A|T|C|U|2|E|F|15|G|@$V|16|W|17|X|Y]|$V|18|W|19|X|Y]]|H|@$V|1A|W|1B|A|1C]]|6|$]]|$A|Z|C|-4|2|E|F|1D|G|@]|H|@]|6|$]]]]

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

<pre><code>&lt;v-text-field ref="myfield" ... &gt;
</code></pre>

and then you can modify it as mounted

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

You can also modify any other attribute like <code>step</code>, or <code>maxLength</code> (for text type). Refer input element API <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement</a>

entityMap|blocks|key|67uma|text|您也可以为此使用数据规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|q9t2|例如:内部数据|fj2h5|data(){
organization:+"",
++++++organizationRules:+[
++++++++(v)+=>+!!v+%7C%7C+"Organization+is+required",
++++++++(v)+=>
++++++++++(v+&&+v.length+<=+50)+%7C%7C
++++++++++"Organization+must+be+less+than+50+characters",
++++++],
}|code-block|syntax|javascript|b3kle|内部模板|aam23|<template>
<v-text-field
++++++++++v-model="organization"
++++++++++:counter="50"
++++++++++:rules="organizationRules"
++++++++++label="Organization"
++++++++++required
++++++++></v-text-field>
</template>|e1b90^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|P|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|Q|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|R|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|S|9|@]|A|@]|B|$H|I]]|$2|N|4|-4|6|7|8|T|9|@]|A|@]|B|$]]]]

You can use data rules for this as well.
Eg:
Inside data
<pre><code>data(){
organization: &quot;&quot;,
 organizationRules: [
 (v) =&gt; !!v || &quot;Organization is required&quot;,
 (v) =&gt;
 (v &amp;&amp; v.length &lt;= 50) ||
 &quot;Organization must be less than 50 characters&quot;,
 ],
}
</code></pre>
Inside template
<pre><code>&lt;template&gt;
&lt;v-text-field
 v-model=&quot;organization&quot;
 :counter=&quot;50&quot;
 :rules=&quot;organizationRules&quot;
 label=&quot;Organization&quot;
 required
 &gt;&lt;/v-text-field&gt;
&lt;/template&gt;
</code></pre>

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 <a href="https://codepen.io/anon/pen/orKMyJ?editors=1111" rel="nofollow noreferrer">codepen</a>

<pre><code>&lt;div id="app"&gt;
 &lt;v-app id="inspire"&gt;
 &lt;v-container&gt;
 &lt;v-layout row wrap&gt;
 &lt;v-text-field
 type="number"
 min=0
 max=10
 onkeyup="if(this.value &gt; 10) this.value = 10;"&gt; 
 &lt;/v-text-field&gt;
 &lt;/v-layout&gt;
 &lt;/v-container&gt;
 &lt;/v-app&gt;
&lt;/div&gt;

new Vue({
 el: '#app',
 data() {
 return {
 }
 }
 })
</code></pre>

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.

Setting max and min limit on input field?

我遇到了这个问题，我有一个vuetify文本字段，我正在尝试设置它的最大和最小限制。现在，设置min=0和max=10可以工作，但似乎仍然可以粘贴大于10的值。 这是一个codepen <div id="app"> <v-app id="inspire"> <v-container> <v-layo...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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