blocks|key|4463441|text|使用HTML5+max和min时，只能将值限制为输入数字。但是您需要使用JavaScript或jQuery来进行这种更改。我的一个想法是使用data-属性并保存旧值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4463442|​|4463443|$(function+()+{
++$("input").keydown(function+()+{
++++//+Save+old+value.
++++if+(!$(this).val()+%7C%7C+(parseInt($(this).val())+<=+11+&&+parseInt($(this).val())+>=+0))
++++$(this).data("old",+$(this).val());
++});
++$("input").keyup(function+()+{
++++//+Check+correct,+else+revert+back+to+old+value.
++++if+(!$(this).val()+%7C%7C+(parseInt($(this).val())+<=+11+&&+parseInt($(this).val())+>=+0))
++++++;
++++else
++++++$(this).val($(this).data("old"));
++});
});|code-block|syntax|javascript|4463444|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input+type="number"+min="0"+max="23"+value="14"+/>|4463445|4463446|entityMap^0|8|3|C|3|1Y|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>With HTML5 <code>max</code> and <code>min</code>, you can only restrict the values to enter numerals. But you need to use JavaScript or jQuery to do this kind of change. One idea I have is using <code>data-</code> attributes and save the old value:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) &lt;= 11 &amp;&amp; parseInt($(this).val()) &gt;= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) &lt;= 11 &amp;&amp; parseInt($(this).val()) &gt;= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="number" min="0" max="23" value="14" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4463513|text|也许你可以使用"range“类型，而不是"+number”类型，因为它使用了一个滑动条，如果你想配置它来显示当前的数字，只要使用JavaScript就可以了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463514|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Maybe Instead of using the "number" type you could use the "range" type which would restrict the user from entering in numbers because it uses a slide bar and if you wanted to configure it to show the current number just use JavaScript</p>


blocks|key|4463291|text|如果你还在寻找答案，你可以使用input+type="number“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463292|如果按该顺序设置，则最小最大功：|4463293|1-名称|4463294|2-最大长度|4463295|3-大小|4463296|4分钟|4463297|最多5个|4463298|直接复制就行了|4463299|<input++name="X"+maxlength="3"+size="2"+min="1"+max="100"+type="number"+/>|code-block|syntax|javascript|4463300|当您手动(使用键盘)输入数字/字母并提交时，如果字母“请输入数字”超出该范围，则会出现一条小消息“请选择一个不大于/小于的值。”|4463301|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|16|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>if you still looking for the answer you can use input type="number".<br>
min max work if it set in that order:<br>
1-name<br>
2-maxlength<br>
3-size<br>
4-min<br>
5-max<br>
just copy it</p>

<pre><code>&lt;input  name="X" maxlength="3" size="2" min="1" max="100" type="number" /&gt;
</code></pre>

<p>when you enter the numbers/letters manually (using the keyboard), and submit a little message will appear in case of letters "please enter a number" in case of a number out of tha range "please select a value that is no more/less than .." </p>


blocks|key|4463592|text|在某些情况下，可以使用pattern代替min和max。它可以与required一起正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4463593|entityMap^0|B|7|K|3|O|3|W|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>In some cases <code>pattern</code> can be used instead of <code>min</code> and <code>max</code>. It works correctly with <code>required</code>.</p>


blocks|key|4463613|text|$(document).ready(function(){
++++$('input[type="number"]').on('keyup',function(){
++++++++v+=+parseInt($(this).val());
++++++++min+=+parseInt($(this).attr('min'));
++++++++max+=+parseInt($(this).attr('max'));

++++++++/*if+(v+<+min){
++++++++++++$(this).val(min);
++++++++}+else+*/if+(v+>+max){
++++++++++++$(this).val(max);
++++++++}
++++})
})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4463614|这是我的贡献。请注意，v<+min被注释掉了，因为我使用的是Bootstrap，它友好地向用户指出范围在1-100之外，但不会突出显示>+max！|unstyled|4463615|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(document).ready(function(){
    $('input[type="number"]').on('keyup',function(){
        v = parseInt($(this).val());
        min = parseInt($(this).attr('min'));
        max = parseInt($(this).attr('max'));

        /*if (v &lt; min){
            $(this).val(min);
        } else */if (v &gt; max){
            $(this).val(max);
        }
    })
})
</code></pre>

<p>Here is my contribution. Note that the v &lt; min is commented out because I'm using Bootstrap which kindly points out to the user that the range is outside the 1-100 but wierdly doesn't highlight > max!</p>


blocks|key|4463619|text|$(document).on('keyup',+'input[type=number][min],input[type=number][max]',+function+()+{
++++var+_this+=+$(this);
++++if+(_this.val()+===+"-")
++++++++return;

++++var+val+=+parseFloat(_this.val());

++++if+(_this.attr("min")+!==+undefined+&&+_this.attr("min")+!==+"")+{
++++++++var+min+=+parseFloat(_this.attr('min'));

++++++++if+(val+<+min)
++++++++++++_this.val(min);
++++}
++++if+(_this.attr("max")+!==+undefined+&&+_this.attr("max")+!==+"")+{
++++++++var+max+=+parseFloat(_this.attr('max'));

++++++++if+(val+>+max)
++++++++++++_this.val(max);
++++}
});
$(document).on('change',+'input[type=number][step]',+function+()+{
++++var+_this+=+$(this);

++++var+val+=+parseFloat(_this.val());

++++if+(_this.attr("step")+!==+undefined+&&+_this.attr("step")+!==+"")+{
++++++++var+step+=+parseFloat(_this.attr('step'));

++++++++if+((val+%25+step)+!=+0)
++++++++++++_this.val(val+-+(val+%25+step));
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4463620|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$(document).on('keyup', 'input[type=number][min],input[type=number][max]', function () {
    var _this = $(this);
    if (_this.val() === "-")
        return;

    var val = parseFloat(_this.val());

    if (_this.attr("min") !== undefined &amp;&amp; _this.attr("min") !== "") {
        var min = parseFloat(_this.attr('min'));

        if (val &lt; min)
            _this.val(min);
    }
    if (_this.attr("max") !== undefined &amp;&amp; _this.attr("max") !== "") {
        var max = parseFloat(_this.attr('max'));

        if (val &gt; max)
            _this.val(max);
    }
});
$(document).on('change', 'input[type=number][step]', function () {
    var _this = $(this);

    var val = parseFloat(_this.val());

    if (_this.attr("step") !== undefined &amp;&amp; _this.attr("step") !== "") {
        var step = parseFloat(_this.attr('step'));

        if ((val % step) != 0)
            _this.val(val - (val % step));
    }
});
</code></pre>


blocks|key|4463645|text|使用此range方法而不是number方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463646|​|4463647|$(function+()+{
++$("#input").change(function+()+{
++++//+Save+old+value.
++++$("#limit").val($("#input").val());
++});
});|code-block|syntax|javascript|4463648|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input+type="text"+id="limit"+name="limit"+value="14"+readonly><br>
<input+type="range"+id="input"+name="input"+min="0"+max="23"+value="14"/>|4463649|4463650|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Use this range method instead of number method.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  $("#input").change(function () {
    // Save old value.
    $("#limit").val($("#input").val());
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="text" id="limit" name="limit" value="14" readonly&gt;&lt;br&gt;
&lt;input type="range" id="input" name="input" min="0" max="23" value="14"/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4463455|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463456|$(function+()+{
++$("input").keydown(function+()+{
++++//+Save+old+value.
++++if+(!$(this).val()+%7C%7C+(parseInt($(this).val())+<=+11+&&+parseInt($(this).val())+>=+0))
++++$(this).data("old",+$(this).val());
++});
++$("input").keyup(function+()+{
++++//+Check+correct,+else+revert+back+to+old+value.
++++if+(!$(this).val()+%7C%7C+(parseInt($(this).val())+<=+11+&&+parseInt($(this).val())+>=+0))
++++++;
++++else
++++++$(this).val($(this).data("old"));
++});
});|code-block|syntax|javascript|4463457|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input+type="number"+min="0"+max="23"+value="14"+/>|4463458|4463459|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) &lt;= 11 &amp;&amp; parseInt($(this).val()) &gt;= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) &lt;= 11 &amp;&amp; parseInt($(this).val()) &gt;= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="number" min="0" max="23" value="14" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4463521|text|忘记快捷键或快捷键:如果最小设置为10，它不会让你进入15或20！使用change事件，因为这是输入值在业务逻辑(ViewModel)中的位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463522|private+_enforceMinMax+=+(input:HTMLInputElement)+=>+{
++++console.log("input",+input);
++++const+v+=+parseFloat(input.value);
++++if(input.hasAttribute("min"))+{
++++++++const+min+=+parseFloat(input.min);
++++++++if(v+<+min)+{
++++++++++++input.value+=+min%2B"";
++++++++}
++++}
++++if(input.hasAttribute("max"))+{
++++++++const+max+=+parseFloat(input.max);
++++++++if(v+>+max)+{
++++++++++++input.value+=+max%2B"";
++++++++}
++++}
}

private+_distanceChange+=+(event)+=>+{
++++this._enforceMinMax(event.target);
++++...|code-block|syntax|javascript|4463523|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Forget the keydown or keyup: it won't let you enter like 15 or 20 if the min was set to 10!
Use the change event since this is where the input value goes in your business logic (ViewModel):</p>

<pre><code>private _enforceMinMax = (input:HTMLInputElement) =&gt; {
    console.log("input", input);
    const v = parseFloat(input.value);
    if(input.hasAttribute("min")) {
        const min = parseFloat(input.min);
        if(v &lt; min) {
            input.value = min+"";
        }
    }
    if(input.hasAttribute("max")) {
        const max = parseFloat(input.max);
        if(v &gt; max) {
            input.value = max+"";
        }
    }
}

private _distanceChange = (event) =&gt; {
    this._enforceMinMax(event.target);
    ...
</code></pre>


blocks|key|4463543|text|当你有一般的函数document+EventListener+"keydown“时，这个工作非常适合地理坐标。在我的例子中，我使用bootstrap类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463544|<input+type="text"+name="X_pos"+id="X_pos"+class="form-control+form-control-line"+onkeydown="event.stopPropagation();+return(parseInt(event.key)+>=+0+&&+parseInt(event.key)+<=+9+&&+this.value%2B''%2Bevent.key+<=+179+&&+this.value%2B''%2Bevent.key+>=+(-179))+%7C%7C+this.value.slice(-1)+==+'.'+&&+parseInt(event.key)+>=+0+&&+parseInt(event.key)+<=+9+%7C%7C+event.keyCode+==+8+%7C%7C+event.keyCode+==+190+&&+String(this.value%2B''%2Bevent.key).match(/\./g).length+<=1+%7C%7C+event.keyCode+==+109+&&+String(this.value%2B''%2Bevent.key).length+==+1+%7C%7C+event.keyCode+==+189+&&+String(this.value%2B''%2Bevent.key).length+==+1"+style="width:100%25;"+placeholder="X"+autocomplete="off">|code-block|syntax|javascript|4463545|如果你愿意，你可以用这段代码创建一个函数，但我更喜欢这种方法。|4463546|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This work perfect for geographic coordinates when you have general function document EventListener &quot;keydown&quot; in my example i use bootstrap class.</p>
<pre><code>&lt;input type=&quot;text&quot; name=&quot;X_pos&quot; id=&quot;X_pos&quot; class=&quot;form-control form-control-line&quot; onkeydown=&quot;event.stopPropagation(); return(parseInt(event.key) &gt;= 0 &amp;&amp; parseInt(event.key) &lt;= 9 &amp;&amp; this.value+''+event.key &lt;= 179 &amp;&amp; this.value+''+event.key &gt;= (-179)) || this.value.slice(-1) == '.' &amp;&amp; parseInt(event.key) &gt;= 0 &amp;&amp; parseInt(event.key) &lt;= 9 || event.keyCode == 8 || event.keyCode == 190 &amp;&amp; String(this.value+''+event.key).match(/\./g).length &lt;=1 || event.keyCode == 109 &amp;&amp; String(this.value+''+event.key).length == 1 || event.keyCode == 189 &amp;&amp; String(this.value+''+event.key).length == 1&quot; style=&quot;width:100%;&quot; placeholder=&quot;X&quot; autocomplete=&quot;off&quot;&gt;
</code></pre>
<p>If you want you can create a function with this code but i preferred this method.</p>


blocks|key|4463775|text|再说一次，没有解决方案真正解决了我的问题。但结合这些知识，它以某种方式起作用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463776|我想要的是一个真正的最大/最小值验证器(支持整数/浮点数)，用于我的输入控制，而不需要花哨的html5帮助|4463777|@Praveen+Kumar+Purushothaman的接受答案有效，但其硬编码的min/max在检查条件下|4463778|@Vincent可以帮助我通过max/min属性动态验证输入字段，但它不是通用的，只验证整数输入。|4463779|在下面的代码中结合这两个答案对我来说很有效|4463780|function+enforceMinMax(el){
++if(el.value+!=+""){
++++if(parseFloat(el.value)+<+parseFloat(el.min)){
++++++el.value+=+el.min;
++++}
++++if(parseFloat(el.value)+>+parseFloat(el.max)){
++++++el.value+=+el.max;
++++}
++}
}

$(function+()+{
++++$("input").keydown(function+()+{
++++++++enforceMinMax(this);
++++});
++++$("input").keyup(function+()+{
++++++++enforceMinMax(this);
++++});
});|code-block|syntax|javascript|4463781|对于DOM|4463782|<input+type="number"+min="0"+max="1"+step=".001"+class="form-control">|4463783|之后，我的所有输入都会真正响应min+max属性。|4463784|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Again, no solution truly solved my question. But combined the knowledge, it somehow worked</p>
<p>What I wanted is a true max/min validator (supporting int/float) for my input control without fancy html5 help</p>
<p>Accepted answer of @Praveen Kumar Purushothaman worked but its hardcoded min/max in the checking condition</p>
<p>@Vincent can help me dynamically validate the input field by max/min attributes but it is not generic and only validating the integer input.</p>
<p>To combine both answer
Below code works for me</p>
<pre><code>function enforceMinMax(el){
  if(el.value != &quot;&quot;){
    if(parseFloat(el.value) &lt; parseFloat(el.min)){
      el.value = el.min;
    }
    if(parseFloat(el.value) &gt; parseFloat(el.max)){
      el.value = el.max;
    }
  }
}

$(function () {
    $(&quot;input&quot;).keydown(function () {
        enforceMinMax(this);
    });
    $(&quot;input&quot;).keyup(function () {
        enforceMinMax(this);
    });
});
</code></pre>
<p>For the DOM</p>
<pre><code>&lt;input type=&quot;number&quot; min=&quot;0&quot; max=&quot;1&quot; step=&quot;.001&quot; class=&quot;form-control&quot;&gt;
</code></pre>
<p>Afterwards all my inputs are truly responsive on the min max attributes.</p>


blocks|key|4463829|text|这对我很有效，我想你应该试试这个，你可以根据需要改变模式，就像从模式1开始一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4463830|<input+type="number"+pattern="[0-9]{2}"+min="0"+max="23"+value="14">|code-block|syntax|javascript|4463831|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me I think you should try this you change the pattern according to your need
like you start from pattern 1</p>
<pre><code>&lt;input type=&quot;number&quot; pattern=&quot;[0-9]{2}&quot; min=&quot;0&quot; max=&quot;23&quot; value=&quot;14&quot;&gt;
</code></pre>


blocks|key|4463673|text|oninput="if(this.value>your_max_number)this.value=your_max_number;"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4463674|这对我来说很好用。|unstyled|4463675|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>oninput=&quot;if(this.value&gt;your_max_number)this.value=your_max_number;&quot;
</code></pre>
<p>This works properly for me.</p>


blocks|key|4463858|text|<input+type="number"+min="0"+onkeyup="if(value<0)+value=0;"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4463859|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;input type=&quot;number&quot; min=&quot;0&quot; onkeyup=&quot;if(value&lt;0) value=0;&quot; /&gt;
</code></pre>


<p>I have <code>type=number</code> input field and I have set <code>min</code> and <code>max</code> values for it:</p>

<pre><code>&lt;input type="number" min="0" max="23" value="14"&gt;
</code></pre>

<p>When I change the time in the rendered UI using the little arrows on the right-hand side of the input field, everything works properly - I cannot go either above 23 or below 0. However, when I enter the numbers manually (using the keyboard), then neither of the restrictions has effect.</p>

<p>Is there a way to prevent anybody from entering whatever number they want?</p>


HTML number input min and max not working properly

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有type=number输入字段，并为其设置了min和max值：<input type="number" min="0" max="23" value="14">当我使用输入栏右侧的小箭头更改渲染UI中的时间时，一切都正常工作-我既不能高于23也不能低于0。但是，当我手动(使用键盘)输入数字时，这两个限制都不起作用。...

问HTML数字输入的最小和最大值不能正常工作
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML数字输入的最小和最大值不能正常工作EN