blocks|key|499828|text|或者，如果您的最大值为99，最小值为0，则可以将其添加到输入元素中(您的值将被您的最大值重写，等等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|499829|<input+type="number"+min="0"+max="99"+
+++onKeyUp="if(this.value>99){this.value='99';}else+if(this.value<0){this.value='0';}"
id="yourid">|code-block|syntax|javascript|499830|然后(如果你愿意)，你可以检查输入的是否是真正的数字|499831|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>Or if your max value is for example 99 and minimum 0, you can add this to input element (your value will be rewrited by your max value etc.)</p>

<pre><code>&lt;input type="number" min="0" max="99" 
   onKeyUp="if(this.value&gt;99){this.value='99';}else if(this.value&lt;0){this.value='0';}"
id="yourid"&gt;
</code></pre>

<p>Then (if you want), you could check if is input really number</p>


blocks|key|715251|text|这很简单，你可以用一些javascript来模拟一个maxlength，看看：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715252|//maxlength="2"
<input+type="number"+onKeyDown="if(this.value.length==2)+return+false;"+/>|code-block|syntax|javascript|715253|entityMap^0|Q|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>it's very simple, with some javascript you can simulate a <code>maxlength</code>, check it out:</p>

<pre><code>//maxlength="2"
&lt;input type="number" onKeyDown="if(this.value.length==2) return false;" /&gt;
</code></pre>


blocks|key|715770|text|您可以将其指定为文本，但添加仅与数字匹配的花瓣：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715771|<input+type="text"+pattern="\d*"+maxlength="2">|code-block|syntax|javascript|715772|它工作完美，在移动设备上(在iOS+8和安卓上测试)也会弹出数字键盘。|715773|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>You can specify it as text, but add pettern, that match numbers only:</p>

<pre><code>&lt;input type="text" pattern="\d*" maxlength="2"&gt;
</code></pre>

<p>It works perfect and also on mobile ( tested on iOS 8 and Android ) pops out the number keyboard.</p>


blocks|key|715874|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715875|//For+Angular+I+have+attached+following+snippet.|code-block|syntax|javascript|715876|<div+ng-app="">
++<form>
++++Enter+number:+<input+type="number"+ng-model="number"+onKeyPress="if(this.value.length==7)+return+false;"+min="0">
++</form>
++<h1>You+entered:+{{number}}</h1>
</div>|715877|715878|如果您使用"onkeypress“事件，那么在开发(单元测试)时，您将不会受到任何用户限制。如果您有要求，不允许用户在特定限制后进入，请查看此代码并尝试一次。|715879|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<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>//For Angular I have attached following snippet.</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-app=""&gt;
  &lt;form&gt;
    Enter number: &lt;input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"&gt;
  &lt;/form&gt;
  &lt;h1&gt;You entered: {{number}}&lt;/h1&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If you use "onkeypress" event then you will not get any user limitations as such while developing ( unit test it). And if you have requirement that do not allow user to enter after particular limit, take a look of this code and try once.</p>


blocks|key|500393|text|另一种选择是只为任何具有maxlength属性的对象添加一个侦听器，并向其添加slice值。假设用户不想在每个与输入相关的事件中使用函数。这是一个代码片段。忽略CSS和HTML代码，JavaScript才是最重要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500394|​|500395|//+Reusable+Function+to+Enforce+MaxLength
function+enforce_maxlength(event)+{
++var+t+=+event.target;
++if+(t.hasAttribute('maxlength'))+{
++++t.value+=+t.value.slice(0,+t.getAttribute('maxlength'));
++}
}

//+Global+Listener+for+anything+with+an+maxlength+attribute.
//+I+put+the+listener+on+the+body,+put+it+on+whatever.
document.body.addEventListener('input',+enforce_maxlength);|code-block|syntax|javascript|500396|label+{+margin:+10px;+font-size:+16px;+display:+block+}
input+{+margin:+0+10px+10px;+padding:+5px;+font-size:+24px;+width:+100px+}
span+{+margin:+0+10px+10px;+display:+block;+font-size:+12px;+color:+#666+}|500397|<label+for="test_input">Text+Input</label>
<input+id="test_input"+type="text"+maxlength="5"/>
<span>set+to+5+maxlength</span>

<br>

<label+for="test_input">Number+Input</label>
<input+id="test_input"+type="number"+min="0"+max="99"+maxlength="2"/>
<span>set+to+2+maxlength,+min+0+and+max+99</span>|500398|500399|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Another option is to just add a listener for anything with the maxlength attribute and add the slice value to that.  Assuming the user doesn't want to use a function inside every event related to the input.  Here's a code snippet. Ignore the CSS and HTML code, the JavaScript is what matters.</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>// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label for="test_input"&gt;Text Input&lt;/label&gt;
&lt;input id="test_input" type="text" maxlength="5"/&gt;
&lt;span&gt;set to 5 maxlength&lt;/span&gt;

&lt;br&gt;

&lt;label for="test_input"&gt;Number Input&lt;/label&gt;
&lt;input id="test_input" type="number" min="0" max="99" maxlength="2"/&gt;
&lt;span&gt;set to 2 maxlength, min 0 and max 99&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|715821|text|最大长度不适用于<input+type="number"，我所知道的最好的方法是使用oninput事件来限制最大长度。简单实现请参考以下代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715822|<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|715823|entityMap^0|8|K|16|7|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>Max length will not work with <code>&lt;input type="number"</code> the best way i know is to use <code>oninput</code> event to limit the maxlength. Please see the below code for simple implementation.</p>

<pre><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>


blocks|key|715697|text|正如其他人所说的，min/max与maxlength不同，因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。要真正模拟maxlength属性，您可以在必要时执行以下操作(这相当于maxlength="16")：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715698|<input+type="number"+oninput="if(value.length>16)value=value.slice(0,16)">|code-block|syntax|javascript|715699|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>As stated by others, min/max is not the same as maxlength because people could still enter a float that would be larger than the maximum string length that you intended. To truly emulate the maxlength attribute, you can do something like this in a pinch (this is equivalent to maxlength="16"):</p>

<pre><code>&lt;input type="number" oninput="if(value.length&gt;16)value=value.slice(0,16)"&gt;
</code></pre>


blocks|key|715639|text|我以前遇到过这个问题，我使用html5+number类型和jQuery的组合解决了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715640|<input+maxlength="2"+min="0"+max="59"+name="minutes"+value="0"+type="number"/>|code-block|syntax|javascript|715641|脚本：|715642|$("input[name='minutes']").on('keyup+keypress+blur+change',+function(e)+{
++++//return+false+if+not+0-9
++++if+(e.which+!=+8+&&+e.which+!=+0+&&+(e.which+<+48+%7C%7C+e.which+>+57))+{
+++++++return+false;
++++}else{
++++++++//limit+length+but+allow+backspace+so+that+you+can+still+delete+the+numbers.
++++++++if(+$(this).val().length+>=+parseInt($(this).attr('maxlength'))+&&+(e.which+!=+8+&&+e.which+!=+0)){
++++++++++++return+false;
++++++++}
++++}
});|715643|我不知道这些事件是否有点夸大其词，但它解决了我的问题。JSfiddle|offset|length|715644|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/odegraciajr/u9a8qsLp/2/^0|0|0|0|0|R|8|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>I had this problem before and I solved it using a combination of html5 number type and jQuery.</p>

<pre><code>&lt;input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/&gt;
</code></pre>

<p>script:</p>

<pre><code>$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 &amp;&amp; e.which != 0 &amp;&amp; (e.which &lt; 48 || e.which &gt; 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length &gt;= parseInt($(this).attr('maxlength')) &amp;&amp; (e.which != 8 &amp;&amp; e.which != 0)){
            return false;
        }
    }
});
</code></pre>

<p>I don't know if the events are a bit overkill but it solved my problem.
<a href="http://jsfiddle.net/odegraciajr/u9a8qsLp/2/" rel="noreferrer">JSfiddle</a></p>


blocks|key|715294|text|梅考·莫拉的回答是一个很好的开始。然而，他的解决方案意味着，当您输入第二个数字时，对该字段的所有编辑都将停止。因此，您不能更改值或删除任何字符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715295|下面的代码在2处停止，但允许继续编辑；|715296|//MaxLength+2
onKeyDown="if(this.value.length==2)+this.value+=+this.value.slice(0,+-+1);"|code-block|syntax|javascript|715297|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Maycow Moura's answer was a good start.
However, his solution means that when you enter the second digit all editing of the field stops. So you cannot change values or delete any characters.</p>

<p>The following code stops at 2, but allows editing to continue;</p>

<pre><code>//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
</code></pre>


blocks|key|716009|text|设置数字输入的最大长度的简单方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716010|<input+type="number"+onkeypress="return+this.value.length+<+4;"+oninput="if(this.value.length>=4)+{+this.value+=+this.value.slice(0,4);+}"+/>|code-block|syntax|javascript|716011|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>a simple way to set maxlength for number inputs is:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input type="number" onkeypress="return this.value.length &lt; 4;" oninput="if(this.value.length&gt;=4) { this.value = this.value.slice(0,4); }" /&gt;
</code></pre>


blocks|key|500538|text|呃。这就像是有人在实现它的过程中半途而废，认为没有人会注意到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500539|无论出于什么原因，上面的答案都没有使用min和max属性。这个jQuery完成了这项工作：|offset|length|style|CODE|500540|++++$('input[type="number"]').on('input+change+keyup+paste',+function+()+{
++++++if+(this.min)+this.value+=+Math.max(parseInt(this.min),+parseInt(this.value)+%7C%7C+0);
++++++if+(this.max)+this.value+=+Math.min(parseInt(this.max),+parseInt(this.value)+%7C%7C+0);
++++});|code-block|syntax|javascript|500541|如果你是“jQuery+-is-jQuery”类型之一，它也可能作为一个命名函数"oninput“工作，而不使用jQuery。|500542|entityMap^0|0|J|3|N|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

<p>Ugh.  It's like someone gave up half way through implementing it and thought no one would notice.</p>

<p>For whatever reason, the answers above don't use the <code>min</code> and <code>max</code> attributes.  This jQuery finishes it up:</p>

<pre><code>    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });
</code></pre>

<p>It would probably also work as a named function "oninput" w/o jQuery if your one of those "jQuery-is-the-devil" types.</p>


blocks|key|499683|text|与type="number"一样，您指定的是max而不是maxlength属性，后者是可能的最大数目。因此，对于4位数，max应为9999，5位数为99999，依此类推。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|499684|此外，如果您想确保它是一个正数，您可以设置min="0"，以确保正数。|499685|entityMap^0|1|D|M|3|S|9|1O|3|1T|4|22|5|0|L|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|I|$]]

<p>As with <code>type="number"</code>, you specify a <code>max</code> instead of <code>maxlength</code> property, which is the maximum possible number possible. So with 4 digits, <code>max</code> should be <code>9999</code>, 5 digits <code>99999</code> and so on.</p>

<p>Also if you want to make sure it is a positive number, you could set <code>min="0"</code>, ensuring positive numbers.</p>


blocks|key|715961|text|HTML输入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715962|+<input+class="minutesInput"+type="number"+min="10"+max="120"+value=""+/>|code-block|syntax|javascript|715963|jQuery|715964|+$(".minutesInput").on('keyup+keypress+blur+change',+function(e)+{

++++if($(this).val()+>+120){
++++++$(this).val('120');
++++++return+false;
++++}

++});|715965|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>HTML Input</p>

<pre><code> &lt;input class="minutesInput" type="number" min="10" max="120" value="" /&gt;
</code></pre>

<p>jQuery</p>

<pre><code> $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() &gt; 120){
      $(this).val('120');
      return false;
    }

  });
</code></pre>


blocks|key|500564|text|<input+type="number"+onchange="this.value=Math.max(Math.min(this.value,+100),+-100);"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|500565|或者，如果您不想输入任何内容|unstyled|500566|<input+type="number"+onchange="this.value=this.value+?+Math.max(Math.min(this.value,100),-100)+:+null"+/>|500567|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" /&gt;
</code></pre>

<p>or if you want to be able enter nothing</p>

<pre><code>&lt;input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" /&gt;
</code></pre>


blocks|key|715375|text|对于有长度限制的数字输入，您也可以尝试这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715376|<input+type="tel"+maxlength="3"+/>|code-block|syntax|javascript|715377|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>You can try this as well for numeric input with length restriction</p>

<pre><code>&lt;input type="tel" maxlength="3" /&gt;
</code></pre>


blocks|key|715713|text|我知道已经有了答案，但是如果您希望您的输入行为与maxlength属性完全相同或尽可能接近，请使用以下代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715714|(function($)+{
+methods+=+{
++++/*
+++++*+addMax+will+take+the+applied+element+and+add+a+javascript+behavior
+++++*+that+will+set+the+max+length
+++++*/
++++addMax:+function()+{
++++++++//+set+variables
++++++++var
++++++++++++maxlAttr+=+$(this).attr("maxlength"),
++++++++++++maxAttR+=+$(this).attr("max"),
++++++++++++x+=+0,
++++++++++++max+=+"";

++++++++//+If+the+element+has+maxlength+apply+the+code.
++++++++if+(typeof+maxlAttr+!==+typeof+undefined+&&+maxlAttr+!==+false)+{

++++++++++++//+create+a+max+equivelant
++++++++++++if+(typeof+maxlAttr+!==+typeof+undefined+&&+maxlAttr+!==+false){
++++++++++++++++while+(x+<+maxlAttr)+{
++++++++++++++++++++max+%2B=+"9";
++++++++++++++++++++x%2B%2B;
++++++++++++++++}
++++++++++++++maxAttR+=+max;
++++++++++++}

++++++++++++//+Permissible+Keys+that+can+be+used+while+the+input+has+reached+maxlength
++++++++++++var+keys+=+[
++++++++++++++++8,+//+backspace
++++++++++++++++9,+//+tab
++++++++++++++++13,+//+enter
++++++++++++++++46,+//+delete
++++++++++++++++37,+39,+38,+40+//+arrow+keys<%5E>v
++++++++++++]

++++++++++++//+Apply+changes+to+element
++++++++++++$(this)
++++++++++++++++.attr("max",+maxAttR)+//add+existing+max+or+new+max
++++++++++++++++.keydown(function(event)+{
++++++++++++++++++++//+restrict+key+press+on+length+reached+unless+key+being+used+is+in+keys+array+or+there+is+highlighted+text
++++++++++++++++++++if+($(this).val().length+==+maxlAttr+&&+$.inArray(event.which,+keys)+==+-1+&&+methods.isTextSelected()+==+false)+return+false;
++++++++++++++++});;
++++++++}
++++},
++++/*
+++++*+isTextSelected+returns+true+if+there+is+a+selection+on+the+page.+
+++++*+This+is+so+that+if+the+user+selects+text+and+then+presses+a+number
+++++*+it+will+behave+as+normal+by+replacing+the+selection+with+the+value
+++++*+of+the+key+pressed.
+++++*/
++++isTextSelected:+function()+{
+++++++//+set+text+variable
++++++++text+=+"";
++++++++if+(window.getSelection)+{
++++++++++++text+=+window.getSelection().toString();
++++++++}+else+if+(document.selection+&&+document.selection.type+!=+"Control")+{
++++++++++++text+=+document.selection.createRange().text;
++++++++}
++++++++return+(text.length+>+0);
++++}
};

$.maxlengthNumber+=+function(){
+++++//+Get+all+number+inputs+that+have+maxlength
+++++methods.addMax.call($("input[type=number]"));
+}

})($)

//+Apply+it:
$.maxlengthNumber();|code-block|syntax|javascript|715715|entityMap^0|O|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I know there's an answer already, but if you want your input to behave exactly like the <code>maxlength</code> attribute or as close as you can, use the following code:</p>

<pre><code>(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined &amp;&amp; maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined &amp;&amp; maxlAttr !== false){
                while (x &lt; maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys&lt;^&gt;v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr &amp;&amp; $.inArray(event.which, keys) == -1 &amp;&amp; methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection &amp;&amp; document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length &gt; 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();
</code></pre>


blocks|key|716187|text|我对所有输入使用一个简单的解决方案(使用jQuery)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716188|$(document).on('input',+':input[type="number"][maxlength]',+function+()+{
++++if+(this.value.length+>+this.maxLength)+{
++++++++this.value+=+this.value.slice(0,+this.maxLength);+
++++}
});|code-block|syntax|javascript|716189|代码选择定义了最大长度的所有输入type="number“元素。|716190|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>I use a simple solution for all inputs (with jQuery):</p>
<pre><code>$(document).on('input', ':input[type=&quot;number&quot;][maxlength]', function () {
    if (this.value.length &gt; this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});
</code></pre>
<p>The code select all input type=&quot;number&quot; element where maxlength has defined.</p>


blocks|key|500769|text|因为我希望验证并且只允许整数，所以我采用了一个现有的答案并对其进行了改进|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500770|其思想是从1到12进行验证，如果输入小于1，则设置为1，如果输入大于12，则设置为12。不允许使用小数。|500771|<input+id="horaReserva"+type="number"+min="1"+max="12"+onkeypress="return+isIntegerInput(event)"+oninput="maxLengthCheck(this)">

function+maxLengthCheck(object)+{
++++if+(object.value.trim()+==+"")+{

++++}
++++else+if+(parseInt(object.value)+>+parseInt(object.max))+{
++++++++object.value+=+object.max+;
++++}
++++else+if+(parseInt(object.value)+<+parseInt(object.min))+{
++++++++object.value+=+object.min+;
++++}
}

function+isIntegerInput+(evt)+{
++++var+theEvent+=+evt+%7C%7C+window.event;
++++var+key+=+theEvent.keyCode+%7C%7C+theEvent.which;
++++key+=+String.fromCharCode+(key);
++++var+regex+=+/[0-9]/;
++++if+(+!regex.test(key)+)+{
++++++++theEvent.returnValue+=+false;

++++++++if(theEvent.preventDefault)+{
++++++++++++theEvent.preventDefault();
++++++++}
++++}
}|code-block|syntax|javascript|500772|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Since I was look to validate and only allow integers I took one the existing answers and improve it</p>
<p>The idea is to validate from 1 to 12, if the input is lower than 1 it will be set to 1, if the input is higher than 12 it will be set to 12. Decimal simbols are not allowed.</p>
<pre><code>&lt;input id=&quot;horaReserva&quot; type=&quot;number&quot; min=&quot;1&quot; max=&quot;12&quot; onkeypress=&quot;return isIntegerInput(event)&quot; oninput=&quot;maxLengthCheck(this)&quot;&gt;

function maxLengthCheck(object) {
    if (object.value.trim() == &quot;&quot;) {

    }
    else if (parseInt(object.value) &gt; parseInt(object.max)) {
        object.value = object.max ;
    }
    else if (parseInt(object.value) &lt; parseInt(object.min)) {
        object.value = object.min ;
    }
}

function isIntegerInput (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]/;
    if ( !regex.test(key) ) {
        theEvent.returnValue = false;

        if(theEvent.preventDefault) {
            theEvent.preventDefault();
        }
    }
}
</code></pre>


blocks|key|499606|text|可以使用的更相关的属性是min和max。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|499607|entityMap^0|C|3|G|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>More relevant attributes to use would be <code>min</code> and <code>max</code>.</p>


blocks|key|716128|text|这可能会对某些人有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|716129|使用一点javascript，您可以搜索所有日期时间本地输入，如果用户尝试输入年份，则搜索将来大于100年的年份：|716130|$('input[type=datetime-local]').each(function(+index+)+{

++++$(this).change(function()+{
++++++var+today+=+new+Date();
++++++var+date+=+new+Date(this.value);
++++++var+yearFuture+=+new+Date();
++++++yearFuture.setFullYear(yearFuture.getFullYear()%2B100);

++++++if(date.getFullYear()+>+yearFuture.getFullYear())+{

++++++++this.value+=+today.getFullYear()+%2B+this.value.slice(4);
++++++}
++++})
++});|code-block|syntax|javascript|716131|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This might help someone.</p>

<p>With a little of javascript you can search for all datetime-local inputs, search if the year the user is trying to input, greater that 100 years in the future:</p>

<pre><code>$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() &gt; yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
</code></pre>


blocks|key|500845|text|下面是使用maxlength的最简单的解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|500846|<form>
+++<input+class="form-control"+id="code_pin"+oninput="if+(this.value.length+>+this.maxLength)+this.value+=+this.value.slice(0,+this.maxLength);"+type="number"+maxlength="4">
</form>|code-block|syntax|javascript|500847|entityMap^0|5|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Here's the simplest solution to use the <code>maxlength</code>:</p>
<pre><code>&lt;form&gt;
   &lt;input class=&quot;form-control&quot; id=&quot;code_pin&quot; oninput=&quot;if (this.value.length &gt; this.maxLength) this.value = this.value.slice(0, this.maxLength);&quot; type=&quot;number&quot; maxlength=&quot;4&quot;&gt;
&lt;/form&gt;
</code></pre>


<p>For <code>&lt;input type="number"&gt;</code> element, <code>maxlength</code> is not working. How can I restrict the <code>maxlength</code> for that number element?</p>


How can I limit possible inputs in a HTML5 "number" element?

单元测试

jQuery

对于<input type="number">元素，maxlength不起作用。如何限制该number元素的maxlength？

问如何限制HTML5 "number“元素中可能的输入？
EN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制HTML5 "number“元素中可能的输入？EN

回答 21

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何限制HTML5 "number“元素中可能的输入？
EN