blocks|key|418631|text|对type="number"的输入使用max属性。它将指定您可以插入的最高可能数字|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|418632|++<input+type="number"+max="999"+/>|code-block|syntax|javascript|418633|如果同时添加最大值和最小值，则可以指定允许值的范围：|418634|++<input+type="number"+min="1"+max="999"+/>|418635|查看此example|418636|编辑|418637|如果为了用户体验，您希望用户输入的数字不能超过某个数字，请使用Javascript/jQuery，如此example所示|418638|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/f8jmB/|1|http://jsfiddle.net/f8jmB/1/^0|1|D|0|0|0|0|3|7|0|0|0|1F|7|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|Q|3|R|5|6|7|1E|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|U|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

<p>Use the max attribute for inputs of <code>type="number"</code>. It will specify the highest possible number that you may insert</p>

<pre><code>  &lt;input type="number" max="999" /&gt;
</code></pre>

<p>if you add both a max and a min value you can specify the range of allowed values:</p>

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

<p>See this <a href="http://jsfiddle.net/f8jmB/">example</a></p>

<p>EDIT</p>

<p>If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this <a href="http://jsfiddle.net/f8jmB/1/">example</a></p>


blocks|key|418682|text|对于那些仍然不能让它工作的人...试试这个来启动更大的数字垫：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|418683|<input+type="number"+name="no1"+maxlength="1"+size="1"+max="9"+pattern="[0-9]*"+/>|code-block|syntax|javascript|418684|和js：|418685|$('input[name="no1"]').keypress(function()+{
++++if+(this.value.length+>=+1)+{
++++++++return+false;
++++}
});|418686|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|$]]

<p>For those who still can't get it to work... Try this to fire up the fatter number pads:</p>

<pre><code>&lt;input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" /&gt;
</code></pre>

<p>And the js:</p>

<pre><code>$('input[name="no1"]').keypress(function() {
    if (this.value.length &gt;= 1) {
        return false;
    }
});
</code></pre>


blocks|key|633452|text|这是一个使用type="number"和maxlength的例子，适用于Chrome、IE和其他浏览器。希望它能帮上忙！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|633453|<!DOCTYPE+html>
<html>

++++<head>
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

++++++++</script>
++++++++<script>
++++++++++++function+test(id,+event)+{
++++++++++++++++var+element+=+$("#"+%2B+id);
++++++++++++++++var+len+=+element.val().length+%2B+1;
++++++++++++++++var+max+=+element.attr("maxlength");

++++++++++++++++var+cond+=+(46+<+event.which+&&+event.which+<+58)+%7C%7C+(46+<+event.keyCode+&&+event.keyCode+<+58);

++++++++++++++++if+(!(cond+&&+len+<=+max))+{
++++++++++++++++++++event.preventDefault();
++++++++++++++++++++return+false;
++++++++++++++++}
++++++++++++}
++++++++</script>
++++</head>

++++<body>
++++++++<input+id="test"+size="3"+type="number"+maxlength="3"+onkeypress="test(this.id,+event)">
++++</body>

</html>|code-block|syntax|javascript|633454|entityMap^0|6|D|K|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Here is an example using <code>type="number"</code> and <code>maxlength</code>, that works with Chrome, IE and others. Hope it helps!</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

    &lt;head&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;

        &lt;/script&gt;
        &lt;script&gt;
            function test(id, event) {
                var element = $("#" + id);
                var len = element.val().length + 1;
                var max = element.attr("maxlength");

                var cond = (46 &lt; event.which &amp;&amp; event.which &lt; 58) || (46 &lt; event.keyCode &amp;&amp; event.keyCode &lt; 58);

                if (!(cond &amp;&amp; len &lt;= max)) {
                    event.preventDefault();
                    return false;
                }
            }
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)"&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>


blocks|key|418757|text|最大长度不适用于<input+type="number"，据我所知，最好的方法是使用oninput+event来限制最大长度。请看下面的代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|418758|​|418759|<input+name="somename"
++++++++oninput="javascript:+if+(this.value.length+>+this.maxLength)+this.value+=+this.value.slice(0,+this.maxLength);"
++++++++type+=+"number"
++++++++maxlength+=+"6"
+++++/>|code-block|syntax|javascript|418760|418761|entityMap^0|8|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>Max length will not work with <code>&lt;input type="number"</code> the best way i know is to use oninput event to limit the maxlength. Please see the below code.</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-html lang-html prettyprint-override"><code>&lt;input name="somename"
        oninput="javascript: if (this.value.length &gt; this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "6"
     /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|633542|text|我用这个jQuery代码解决了这个问题：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|633543|$('input[type="number"]').on('keypress',+function+(e)+{
++++var+maxlength+=+$(this).prop('maxlength');
++++if+(maxlength+!==+-1)+{++//+Prevent+execute+statement+for+non-set+maxlength+prop+inputs
++++++++var+length+=+$(this).val().trim().length;
++++++++if+(length+%2B+1+>+maxlength)+e.preventDefault();
++++}
});|code-block|syntax|javascript|633544|为你想要的每个input[type="number"]设置maxlength属性，就像文本输入一样。|633545|entityMap^0|4|6|0|0|7|K|T|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>I solved problem using this <code>jQuery</code> codes:</p>

<pre><code>$('input[type="number"]').on('keypress', function (e) {
    var maxlength = $(this).prop('maxlength');
    if (maxlength !== -1) {  // Prevent execute statement for non-set maxlength prop inputs
        var length = $(this).val().trim().length;
        if (length + 1 &gt; maxlength) e.preventDefault();
    }
});
</code></pre>

<p>Set <code>maxlength</code> attribute for every <code>input[type="number"]</code> that you want, just like text inputs.</p>


<pre><code>&lt;input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"&gt;
</code></pre>

<p>This is my HTML, taken with firebug (on chrome).</p>

<p>I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.</p>

<p>When on Firefox or IE10, the limit is fine.</p>

<p>I haven't found this issue around on the net.</p>

<p>Note: type="number" - not text.</p>

<p>Anyone saw this issue before?</p>


HTML maxlength attribute not working on chrome and safari?

jQuery

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtyp...

问HTML maxlength属性在chrome和safari上不起作用吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML maxlength属性在chrome和safari上不起作用吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML maxlength属性在chrome和safari上不起作用吗？
EN