blocks|key|614320|text|根据MDN的说法，maxlength不用于number%25s。您是否尝试过：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|614321|<input+type="number"+min="0"+max="99"+/>|code-block|syntax|javascript|614322|或|614323|<input+type="range"+min="0"+max="99"+/>|614324|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength^0|9|9|L|6|2|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

According to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength" rel="nofollow">MDN</a>, <code>maxlength</code> is not used for <code>number</code>s. Have you tried just:

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

OR

<pre><code>&lt;input type="range" min="0" max="99" /&gt;
</code></pre>

blocks|key|398429|text|正如Andrew所说的，你需要将类型改为range，除此之外，你在IE和FF以及可能是旧的ipad浏览器上都会遇到问题，因为它来自HTML5，它是一个“友好的新”。看看这个用JS尝试过range的人，Specify+range+of+numbers+to+input+in+number+field+using+javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|398430|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/5193278/specify-range-of-numbers-to-input-in-number-field-using-javascript^0|2S|1U|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

as Andrew said you need to change the type to range, beside that you are going to have problems with IE and FF and probably old ipad browser because that's from HTML 5, and it's a "Kind New". Take a look to this person who tried the range with JS,
<a href="https://stackoverflow.com/questions/5193278/specify-range-of-numbers-to-input-in-number-field-using-javascript">Specify range of numbers to input in number field using javascript</a>

blocks|key|398501|text|您可以使用JavaScript检查框中有多少个字符，如果太多，则删除一个：http://www.webcodingtech.com/javascript/limit-input-text.php|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|398502|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webcodingtech.com/javascript/limit-input-text.php^0|11|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can use JavaScript to check how many characters are in the box and if there are too many, remove one:
<a href="http://www.webcodingtech.com/javascript/limit-input-text.php" rel="nofollow">http://www.webcodingtech.com/javascript/limit-input-text.php</a>

blocks|key|398565|text|这里是一个缓存选择器的更优化的jQuery版本。它还使用了输入类型number不支持的maxlength属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398566|//+limits+the+input+based+on+the+maxlength+attribute,+this+is+by+default+no+supported+by+input+type+number
$("input[type=number]").on('keydown+keyup',function(){+
++++var+$that+=+$(this),
++++maxlength+=+$that.attr('maxlength')
++++if($.isNumeric(maxlength)){
++++++++$that.val($that.val().substr(0,+maxlength));
++++};
});|code-block|syntax|javascript|398567|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|$]]

Here a more optimized jQuery version that caches the selectors.
It also uses the maxlength attribute that is not supported by input type number.

<pre><code>// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){ 
 var $that = $(this),
 maxlength = $that.attr('maxlength')
 if($.isNumeric(maxlength)){
 $that.val($that.val().substr(0, maxlength));
 };
});
</code></pre>

blocks|key|614591|text|看看这个，它对我很有效；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|614592|Is+there+a+minlength+validation+attribute+in+HTML5?|offset|length|614593|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5^0|0|0|1F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Check this out, it works for me; 

<a href="https://stackoverflow.com/questions/10281962/is-there-a-minlength-validation-attribute-in-html5">Is there a minlength validation attribute in HTML5?</a>

blocks|key|398671|text|jQuery的另一种选择，但onkeypress事件...;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398672|$("input[type=number]").on('keypress',function(e)+{+
++++var+$that+=+$(this),
++++maxlength+=+$that.attr('maxlength')
++++if($.isNumeric(maxlength)){
++++++++if($that.val().length+==+maxlength)+{+e.preventDefault();+return;+}

++++++++$that.val($that.val().substr(0,+maxlength));
++++};
});|code-block|syntax|javascript|398673|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|$]]

Another option with jQuery, but onkeypress event... ;)

<pre><code>$("input[type=number]").on('keypress',function(e) { 
 var $that = $(this),
 maxlength = $that.attr('maxlength')
 if($.isNumeric(maxlength)){
 if($that.val().length == maxlength) { e.preventDefault(); return; }

 $that.val($that.val().substr(0, maxlength));
 };
});
</code></pre>

blocks|key|614706|text|您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|614707|<input+type="number"+onkeypress="limitKeypress(event,this.value,2)"/>|code-block|syntax|javascript|614708|和js代码：|614709|function+limitKeypress(event,+value,+maxLength)+{
++++if+(value+!=+undefined+&&+value.toString().length+>=+maxLength)+{
++++++++event.preventDefault();
++++}
}|614710|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

you can use this code:

<pre><code>&lt;input type="number" onkeypress="limitKeypress(event,this.value,2)"/&gt;
</code></pre>

and js code:

<pre><code>function limitKeypress(event, value, maxLength) {
 if (value != undefined &amp;&amp; value.toString().length &gt;= maxLength) {
 event.preventDefault();
 }
}
</code></pre>

blocks|key|398742|text|这是Tripex的答案优化，允许删除键，工作时，键入和粘贴。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398743|$(document).on("keyup",+"#your_element",+function(e)+{
++++var+$that+=+$(this),
++++maxlength+=+$that.attr('maxlength');
++++if+($.isNumeric(maxlength)){
++++++++if($that.val().length+===+maxlength)+{
++++++++++++e.preventDefault();
++++++++++++//+If+keyCode+is+not+delete+key+
++++++++++++if+(e.keyCode+!==+64)+{
++++++++++++++++return;
++++++++++++}
++++++++}
++++++++$that.val($that.val().substr(0,+maxlength));
++++}
});|code-block|syntax|javascript|398744|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|$]]

This is Tripex answer optimized for allowing delete key, works when typing and on paste.

<pre><code>$(document).on("keyup", "#your_element", function(e) {
 var $that = $(this),
 maxlength = $that.attr('maxlength');
 if ($.isNumeric(maxlength)){
 if($that.val().length === maxlength) {
 e.preventDefault();
 // If keyCode is not delete key 
 if (e.keyCode !== 64) {
 return;
 }
 }
 $that.val($that.val().substr(0, maxlength));
 }
});
</code></pre>

It seems that neither of the "maxlength", "min" or "max" HTML attributes have the desired effect on iPhone for the following markup: 

<pre><code> &lt;input type="number" maxlength="2" min="0" max="99"/&gt;
</code></pre>

Instead of limiting the number of digits or the value of the number entered, the number is just left as it was typed in on iPhone 4. This markup works on most other phones we tested. 

What gives?

Any workarounds?

If it is important to the solution, we use jQuery mobile.

Thanks!

How to restrict number of characters that can be entered in HTML5 number input field on iPhone

jQuery

HTML5

对于下面的标记，"maxlength“、"min”或"max“属性似乎都没有对iPhone产生预期的效果： <input type="number" maxlength="2" min="0" max="99"/>不限制输入的数字位数或数值，只保留在iPhone 4上输入的数字。这个标记在我们测试的大多数其他手机上都有...

问如何限制iPhone上HTML5号输入字段的字符数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制iPhone上HTML5号输入字段的字符数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制iPhone上HTML5号输入字段的字符数
EN