blocks|key|7714|text|添加a+min+attribute|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|7715|​|7716|<input+type="number"+min="0">|code-block|syntax|javascript|7717|7718|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html5/forms.html#attr-input-min^0|4|3|2|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>Add <a href="http://www.w3.org/TR/html5/forms.html#attr-input-min" rel="noreferrer">a <code>min</code> attribute</a></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-html lang-html prettyprint-override"><code>&lt;input type="number" min="0"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|7768|text|这取决于你想要的精确度。如果您只想接受整数，则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7769|​|7770|<input+type="number"+min="1"+step="1">|code-block|syntax|javascript|7771|7772|例如，如果您想要小数点后有两位数的浮点数：|7773|7774|<input+type="number"+min="0.01"+step="0.01">|7775|7776|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>It depends on how precise you want to be. It you want to accept only integers, than:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" min="1" step="1"&gt;</code></pre>
</div>
</div>
</p>

<p>If you want floats with, for example, two digits after decimal point:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" min="0.01" step="0.01"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|224351|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224352|<input+type="number"+pattern="%5E[0-9]"+title='Only+Number'+min="1"+step="1">|offset|length|style|CODE|224353|entityMap^0|0|0|23|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Try</p>

<p><code>&lt;input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1"&gt;</code></p>


blocks|key|7801|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7802|<input+type="number"+min="1"+step="1">|code-block|syntax|javascript|7803|7804|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="number" min="1" step="1"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|224420|text|通过在input标记中添加onkeypress，可以强制输入仅包含正整数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|224421|​|224422|<input+type="number"+onkeypress="return+event.charCode+>=+48"+min="1"+>|code-block|syntax|javascript|224423|224424|在这里，event.charCode+>=+48确保只返回大于或等于0的数字，而min标记确保通过在输入栏中滚动，最少可以返回1。|224425|entityMap^0|3|5|D|A|0|0|0|0|4|K|14|3|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

<p>You can force the input to contain only positive integer by adding <code>onkeypress</code> within the <code>input</code> tag.</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-html lang-html prettyprint-override"><code>&lt;input type="number" onkeypress="return event.charCode &gt;= 48" min="1" &gt;</code></pre>
</div>
</div>
</p>

<p>Here, <code>event.charCode &gt;= 48</code> ensures that only numbers greater than or equal to 0 are returned, while the <code>min</code> tag ensures that you can come to a minimum of 1 by scrolling within the input bar.</p>


blocks|key|224445|text|在您的输入类型中添加此代码；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224446|onkeypress="return+(event.charCode+==+8+%7C%7C+event.charCode+==+0+%7C%7C+event.charCode+==+13)+?+null+:+event.charCode+>=+48+&&+event.charCode+<=+57"|code-block|syntax|javascript|224447|例如：|224448|<input+type="text"+name="age"+onkeypress="return+(event.charCode+==+8+%7C%7C+event.charCode+==+0+%7C%7C+event.charCode+==+13)+?+null+:+event.charCode+>=+48+&&+event.charCode+<=+57"+/>|224449|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>add this code in your input type;</p>

<pre><code>onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57"
</code></pre>

<p>for example:</p>

<pre><code>&lt;input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57" /&gt;
</code></pre>


blocks|key|224470|text|我找到了另一个防止负数的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224471|<input+type="number"+name="test_name"+min="0"+oninput="validity.valid%7C%7C(value='');">|code-block|syntax|javascript|224472|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>I have found another solution to prevent negative number.</p>

<pre><code>&lt;input type="number" name="test_name" min="0" oninput="validity.valid||(value='');"&gt;
</code></pre>


blocks|key|7984|text|对于文本类型的输入，您可以使用它来进行更好的验证，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7985|return+(event.keyCode?+(event.keyCode+==+69+?+false+:+event.keyCode+>=+48+&&+event.keyCode+<=+57)+:+(event.charCode+>=+48+&&+event.charCode+<=+57))?+true+:+event.preventDefault();|code-block|syntax|javascript|7986|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>With text type of input you can use this for a better validation,</p>

<pre><code>return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode &gt;= 48 &amp;&amp; event.keyCode &lt;= 57) : (event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57))? true : event.preventDefault();
</code></pre>


blocks|key|7992|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7993|Yii2+:+Validation+rule+

++++public+function+rules()+{
++++return+[
['location_id',+'compare',+'compareValue'+=>+0',+'operator'+=>+'>'],
++++++++];
}|code-block|syntax|javascript|7994|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>Try this:</p>

<pre><code>Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' =&gt; 0', 'operator' =&gt; '&gt;'],
        ];
}
</code></pre>


blocks|key|224535|text|您可以使用以下方法使type="number"仅接受正数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|224536|input+type="number"+step="1"+pattern="\d%2B"|code-block|syntax|javascript|224537|entityMap^0|A|D|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>You can use the following to make <code>type="number"</code> accept positive numbers only:</p>

<pre><code>input type="number" step="1" pattern="\d+"
</code></pre>


blocks|key|224641|text|我找不到完美的解决方案，因为有些工作是输入，而不是复制和粘贴，有些工作是相反的。这个解决方案对我很有效。它防止负数，键入"e"，复制和粘贴"e“文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224642|创建一个函数。|224643|<script+language="JavaScript">

++//+this+prevents+from+typing+non-number+text,+including+"e".
++function+isNumber(evt)+{
++++evt+=+(evt)+?+evt+:+window.event;
++++let+charCode+=+(evt.which)+?+evt.which+:+evt.keyCode;
++++if+((charCode+>+31+&&+(charCode+<+48+%7C%7C+charCode+>+57))+&&+charCode+!==+46)+{
++++++evt.preventDefault();
++++}+else+{
++++++return+true;
++++}
++}
</script>|code-block|syntax|javascript|224644|将这些属性添加到输入。这两种方法可以防止复制和粘贴非数字文本，包括"e“。你需要两者兼而有之才能生效。|224645|<input+type="number"+oninput="validity.valid%7C%7C(value='');"+onpress="isNumber(event)"+/>|224646|如果您使用的是Vue+you+can+refer+this+answer+here。我已经将它提取到一个可以重复使用的混音器中。|offset|length|224647|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/39782176/filter-input-text-only-accept-number-and-dot-vue-js/53330300#53330300^0|0|0|0|0|0|B|U|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|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>I cannot find the perfect solution as some work for inputting but not for copy&amp;paste, some are the other way around. This solution works for me. It prevents from negative number, typing "e", copy&amp;paste "e" text.</p>

<p>create a function.</p>

<pre><code>&lt;script language="JavaScript"&gt;

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57)) &amp;&amp; charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
&lt;/script&gt;
</code></pre>

<p>add these properties to input. this two prevent from copy&amp;paste non-number text, including "e". you need to have both together to take effect.</p>

<pre><code>&lt;input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" /&gt;
</code></pre>

<p>If you are using Vue <a href="https://stackoverflow.com/questions/39782176/filter-input-text-only-accept-number-and-dot-vue-js/53330300#53330300">you can refer this answer here</a>. I have extracted it to a mixin which can be reused.</p>


blocks|key|224684|text|其他解决方案是使用Js使其为正(min选项可以被禁用，并且在用户键入smth时无效)负的if不是必需的，也可以使用on('keydown')事件！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224685|let+$numberInput+=++$('#whatEverId');
$numberInput.on('change',+function(){
++++let+numberInputText+=+$numberInput.val();
++++if(numberInputText.includes('-')){
++++++++$numberInput.val(Math.abs($numberInput.val()));
++++}
});|code-block|syntax|javascript|224686|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>Other solution is to use Js to make it positive (min option can be disabled and is not valid when the user types smth) The negative if is not necessary and on('keydown') event can also be used!</p>

<pre><code>let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});
</code></pre>


blocks|key|224735|text|这取决于你想要整型字段还是浮点型字段。下面是这两个文件的外观：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224736|<input+type="number"+name="int-field"+id="int-field"+placeholder="positive+int"+min="1"+step="1">
<input+type="number"+name="float-field"+id="float-field"+placeholder="positive+float"+min="0">|code-block|syntax|javascript|224737|int字段附加了正确的验证，因为它的最小值为1。但是，float字段接受0；要处理此问题，可以再添加一个constraint+validator|offset|length|224738|function+checkIsPositive(e)+{
++const+value+=+parseFloat(e.target.value);
++if+(e.target.value+===+""+%7C%7C+value+>+0)+{
++++e.target.setCustomValidity("");
++}+else+{
++++e.target.setCustomValidity("Please+select+a+value+that+is+greater+than+0.");
++}
}

document.getElementById("float-field").addEventListener("input",+checkIsPositive,+false);|224739|JSFiddle+here.|224740|注意，这些解决方案都不能完全阻止用户输入无效的输入，但是您可以调用checkValidity+or+reportValidity来判断用户是否输入了有效的输入。|style|CODE|224741|当然，您仍然应该使用服务器端验证，因为用户总是可以忽略客户端验证。|224742|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation|1|https://jsfiddle.net/qo9t5rhs/1/|2|https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation^0|0|0|1G|K|0|0|0|0|E|1|0|X|D|1E|E|X|V|2|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|K|3|L|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1D|8|@]|9|@$I|1E|J|1F|1|1G]]|A|$]]|$1|O|3|P|5|6|7|1H|8|@$I|1I|J|1J|Q|R]|$I|1K|J|1L|Q|R]]|9|@$I|1M|J|1N|1|1O]]|A|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]|14|$5|X|Y|Z|A|$10|15]]]]

<p>It depends on whether you want an int or float field. Here's what the two would look like:</p>

<pre><code>&lt;input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1"&gt;
&lt;input type="number" name="float-field" id="float-field" placeholder="positive float" min="0"&gt;
</code></pre>

<p>The int field has the correct validation attached to it, since its min is 1. The float field accepts 0, however; to deal with this, you can add one more <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation" rel="nofollow noreferrer">constraint validator</a>:</p>

<pre><code>function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value &gt; 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);
</code></pre>

<p><a href="https://jsfiddle.net/qo9t5rhs/1/" rel="nofollow noreferrer">JSFiddle here.</a></p>

<p>Note that none of these solutions completely prevent the user from trying to type in invalid input, but you can call <a href="https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation" rel="nofollow noreferrer"><code>checkValidity</code> or <code>reportValidity</code></a> to figure out whether the user has typed in valid input.</p>

<p>Of course, you should still have server-side validation because the user can always ignore client-side validation.</p>


blocks|key|224804|text|您可以通过以下方式将负数输入转换为正数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224805|​|224806|<input+type="number"+onkeyup="if(this.value<0){this.value=+this.value+*+-1}">|code-block|syntax|javascript|224807|224808|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can turn negative input into a positive number by the following:</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 type="number" onkeyup="if(this.value&lt;0){this.value= this.value * -1}"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|8310|text|如果您尝试输入负数，则onkeyup事件会阻止此操作；如果您在输入数字上使用箭头，则onblur事件会解析该部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8311|​|8312|<input+type="number"+
++++onkeyup="if(this.value<0)this.value=1"
++++onblur="if(this.value<0)this.value=1"
>|code-block|syntax|javascript|8313|8314|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>If you try to enter a negative number, the onkeyup event blocks this and if you use the arrow on the input number, the onblur event resolves that part.</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 type="number" 
    onkeyup="if(this.value&lt;0)this.value=1"
    onblur="if(this.value&lt;0)this.value=1"
&gt;</code></pre>
</div>
</div>
</p>


blocks|key|224890|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224891|(function+($)+{
++$.fn.inputFilter+=+function+(inputFilter)+{
++++return+this.on('input+keydown+keyup+mousedown+mouseup+select+contextmenu+drop',+function+()+{
++++++if+(inputFilter(this.value))+{
++++++++this.oldValue+=+this.value;
++++++++this.oldSelectionStart+=+this.selectionStart;
++++++++this.oldSelectionEnd+=+this.selectionEnd;
++++++}+else+if+(this.hasOwnProperty('oldValue'))+{
++++++++this.value+=+this.oldValue;
++++++++//this.setSelectionRange(this.oldSelectionStart,+this.oldSelectionEnd);
++++++}+else+{
++++++++this.value+=+'';
++++++}
++++});
++};
})(jQuery);

$('.positive_int').inputFilter(function+(value)+{
++return+/%5E\d*[.]?\d{0,2}$/.test(value);
});|code-block|syntax|javascript|224892|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input+type="number"+class="positive_int"/>|224893|224894|上面的代码对所有人都很好！它还将防止插入超过2个小数点。如果不需要，只需删除\d{0，2}，或者如果需要更多有限的小数点，只需更改数字2|224895|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>(function ($) {
  $.fn.inputFilter = function (inputFilter) {
    return this.on('input keydown keyup mousedown mouseup select contextmenu drop', function () {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty('oldValue')) {
        this.value = this.oldValue;
        //this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = '';
      }
    });
  };
})(jQuery);

$('.positive_int').inputFilter(function (value) {
  return /^\d*[.]?\d{0,2}$/.test(value);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="number" class="positive_int"/&gt;</code></pre>
</div>
</div>
</p>
<p>Above code works fine for all !!! And it will also prevent inserting more than 2 decimal points. And if you don't need this just remove\d{0,2} or if need more limited decimal point just change number 2</p>


blocks|key|224917|text|我认为使用文本类型比使用数字更好，因为使用type=number，你会遇到一些问题，比如输入框中的箭头键和上下键上的值变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224918|224919|<input+type="text"+onkeypress="return+event.charCode>=48+&&+event.charCode<=57"+/>|code-block|syntax|javascript|224920|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|K|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|L|8|@]|9|@]|A|$F|G]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p>I think using type text is best instead of number because using type=number, you will face some problems like arrow keys in input field and value change on up and down key.</p>
<hr />
<pre><code>&lt;input type=&quot;text&quot; onkeypress=&quot;return event.charCode&gt;=48 &amp;&amp; event.charCode&lt;=57&quot; /&gt;
</code></pre>


blocks|key|224946|text|使用这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224947|onkeypress="return+(event.charCode+>=+48+&&+event.charCode+<=+57+%7C%7C+event.charCode+==+46)"+|code-block|syntax|javascript|224948|您可以输入整数和小数。|224949|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>Use this.</p>
<pre><code>onkeypress=&quot;return (event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57 || event.charCode == 46)&quot; 
</code></pre>
<p>You can enter whole numbers and decimal numbers.</p>


blocks|key|8427|text|这个解决方案可能看起来有点多余，但却照顾到了每一个方面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8428|在表单中使用以下内容|8429|<input+type="number"+min="0"+(keypress)="onlyDigits($event)"+>|code-block|syntax|javascript|8430|并在.ts中定义函数|8431|onlyDigits(event)+{
+++let+code+=+event.charCode;
+++return+(code+>=+48+&&+code+<=+57);
}|8432|这可确保只能使用箭头输入正数。它还可以防止键入任何非数字字符(包括'-'，'%2B‘和'e')|8433|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>This solution might seem a little bit redundant, but takes care of every aspect.</p>
<p>In the form use this</p>
<pre><code>&lt;input type=&quot;number&quot; min=&quot;0&quot; (keypress)=&quot;onlyDigits($event)&quot; &gt;
</code></pre>
<p>and in the .ts define the function</p>
<pre><code>onlyDigits(event) {
   let code = event.charCode;
   return (code &gt;= 48 &amp;&amp; code &lt;= 57);
}
</code></pre>
<p>This ensures only positive numbers might be entered with the arrows. It also prevents typing of any non-digit char (including '-', '+' and 'e')</p>


<p>currently I have the following code</p>

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

<p>it comes out to something like this</p>

<p><img src="https://i.stack.imgur.com/dxgg1.png" alt="enter image description here"></p>

<p>The little selector things on the right allow the number to go into negative. How do I prevent that?</p>

<p>I am having doubts about using <code>type="number"</code>, it is causing more problems than it is solving, I am going to sanity check it anyways, so should I just go back to using <code>type="text"</code>?</p>


How to make type="number" to positive numbers only

目前我有以下代码<input type="number" />结果是这样的​​右边的小选择器允许数字变为负数。我如何防止这种情况发生？我对使用type="number"有疑问，它造成的问题比它解决的问题多，我无论如何都要对它进行理智的检查，所以我应该重新使用type="text"吗？

问如何使type="number“仅为正数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使type="number“仅为正数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使type="number“仅为正数
EN