blocks|key|727270|text|HTML+5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727271|您可以使用HTML5+input+type+number仅限制数字条目：|offset|length|727272|<input+type="number"+name="someid"+/>|code-block|syntax|javascript|727273|这仅适用于HTML5投诉浏览器。确保您的html文档的doctype为：|727274|<!DOCTYPE+html>|style|CODE|727275|另请参阅https://github.com/jonstipe/number-polyfill，以获得旧浏览器中的透明支持。|727276|JavaScript|727277|更新：有一个新的非常简单的解决方案：|BOLD|727278|727279|它允许您在文本<input>上使用任何类型的输入筛选器，包括各种数字筛选器。这将正确处理Copy%2BPaste、Drag%2BDrop、键盘快捷键、上下文菜单操作、不可键入的键和所有键盘布局。|blockquote|727280|727281|727282|查看this+answer或亲自尝试on+JSFiddle。|727283|对于一般用途，您可以进行如下JS验证：|727284|function+isNumberKey(evt){
++++var+charCode+=+(evt.which)+?+evt.which+:+evt.keyCode
++++if+(charCode+>+31+&&+(charCode+<+48+%7C%7C+charCode+>+57))
++++++++return+false;
++++return+true;
}

<input+name="someid"+type="number"+onkeypress="return+isNumberKey(event)"/>|727285|如果您希望允许使用小数，请将"if+condition“替换为：|727286|if+(charCode+>+31+&&+(charCode+!=+46+&&(charCode+<+48+%7C%7C+charCode+>+57)))|727287|来源：HTML+text+input+allow+only+numeric+input|727288|JSFiddle演示：http://jsfiddle.net/viralpatel/nSjy7/|727289|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)|1|https://github.com/jonstipe/number-polyfill|2|https://stackoverflow.com/a/469362/1070129|3|https://jsfiddle.net/emkey08/zgvtjc51|4|https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input|5|http://jsfiddle.net/viralpatel/nSjy7/^0|0|5|N|0|0|0|0|0|F|0|4|17|1|0|0|0|3|0|0|7|7|H|2|0|0|0|2|B|2|I|B|3|0|0|0|0|0|3|14|4|0|B|11|5|0^^$0|@$1|2|3|4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]]|A|$]]|$1|F|3|G|5|H|7|24|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|25|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|26|8|@$D|27|E|28|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|29|8|@]|9|@$D|2A|E|2B|1|2C]]|A|$]]|$1|S|3|T|5|6|7|2D|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2E|8|@$D|2F|E|2G|O|W]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|10|7|2I|8|@$D|2J|E|2K|O|P]|$D|2L|E|2M|O|W]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2P|8|@]|9|@$D|2Q|E|2R|1|2S]|$D|2T|E|2U|1|2V]]|A|$]]|$1|15|3|16|5|6|7|2W|8|@]|9|@]|A|$]]|$1|17|3|18|5|H|7|2X|8|@]|9|@]|A|$I|J]]|$1|19|3|1A|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|H|7|2Z|8|@]|9|@]|A|$I|J]]|$1|1D|3|1E|5|6|7|30|8|@]|9|@$D|31|E|32|1|33]]|A|$]]|$1|1F|3|1G|5|6|7|34|8|@]|9|@$D|35|E|36|1|37]]|A|$]]|$1|1H|3|-4|5|6|7|38|8|@]|9|@]|A|$]]]|1I|$1J|$5|1K|1L|1M|A|$1N|1O]]|1P|$5|1K|1L|1M|A|$1N|1Q]]|1R|$5|1K|1L|1M|A|$1N|1S]]|1T|$5|1K|1L|1M|A|$1N|1U]]|1V|$5|1K|1L|1M|A|$1N|1W]]|1X|$5|1K|1L|1M|A|$1N|1Y]]]]

<h2>HTML 5</h2>

<p>You can use <a href="https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)" rel="noreferrer">HTML5 input type number</a> to restrict only number entries:</p>

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

<p>This will work only in HTML5 complaint browser. Make sure your html document's doctype is: </p>

<p><code>&lt;!DOCTYPE html&gt;</code></p>

<p>See also <a href="https://github.com/jonstipe/number-polyfill" rel="noreferrer">https://github.com/jonstipe/number-polyfill</a> for transparent support in older browsers.</p>

<h2>JavaScript</h2>

<p><strong>Update:</strong> There is a new and very simple solution for this:</p>

<blockquote>
  <p>It allows you to use <strong>any</strong> kind of input filter on a text <code>&lt;input&gt;</code>,
  including various numeric filters. This will correctly handle
  Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
  non-typeable keys, and all keyboard layouts.</p>
</blockquote>

<p>See <a href="https://stackoverflow.com/a/469362/1070129">this answer</a> or try it yourself <a href="https://jsfiddle.net/emkey08/zgvtjc51" rel="noreferrer">on JSFiddle</a>.</p>

<p>For general purpose, you can have JS validation as below:</p>

<pre><code>function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57))
        return false;
    return true;
}

&lt;input name="someid" type="number" onkeypress="return isNumberKey(event)"/&gt;
</code></pre>

<p>If you want to allow decimals replace the "if condition" with this:</p>

<pre><code>if (charCode &gt; 31 &amp;&amp; (charCode != 46 &amp;&amp;(charCode &lt; 48 || charCode &gt; 57)))
</code></pre>

<p>Source: <a href="https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input">HTML text input allow only numeric input</a></p>

<p>JSFiddle demo: <a href="http://jsfiddle.net/viralpatel/nSjy7/" rel="noreferrer">http://jsfiddle.net/viralpatel/nSjy7/</a></p>


blocks|key|127754|text|使用<input+type="number"...>怎么样？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|127755|http://www.w3schools.com/tags/tag_input.asp|127756|另外，这里是a+question+that+has+some+examples+of+using+Javascript+for+validation。|127757|更新:链接到更好的问题(感谢alexblum)。|127758|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input^0|2|O|0|0|17|0|0|6|1W|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|K|5|6|7|15|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|G]]|S|$5|O|P|Q|E|$R|T]]]]

<p>How about using <code>&lt;input type="number"...&gt;</code>?</p>

<p><a href="http://www.w3schools.com/tags/tag_input.asp" rel="nofollow noreferrer">http://www.w3schools.com/tags/tag_input.asp</a></p>

<p>Also, here is <a href="https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input">a question that has some examples of using Javascript for validation</a>.</p>

<p>Update: linked to better question (thanks alexblum).</p>


blocks|key|4077275|text|您还可以在html5中使用pattern属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077276|<input+type="text"+name="name"+pattern="[0-9]"+title="Title"+/>+|code-block|syntax|javascript|4077277|Input+validation+tutorial|offset|length|4077278|不过，如果您的文档类型不是html，那么我认为您需要使用一些javascript/jquery。|style|CODE|4077279|entityMap|0|LINK|mutability|MUTABLE|url|https://www.the-art-of-web.com/html/html5-form-validation/^0|0|0|0|P|0|0|D|4|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|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>You can also use the pattern attribute in html5:</p>

<pre><code>&lt;input type="text" name="name" pattern="[0-9]" title="Title" /&gt; 
</code></pre>

<p><a href="https://www.the-art-of-web.com/html/html5-form-validation/" rel="noreferrer">Input validation tutorial</a></p>

<p>Although, if your doctype isn't <code>html</code> then I think you'll need to use some javascript/jquery.</p>


blocks|key|4559112|text|您可以使用<input+type="number"+/>。这将只允许在输入框中输入数字。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4559113|示例：http://jsfiddle.net/SPqY3/|4559114|请注意，input+type="number"标记仅在较新的浏览器中受支持。|4559115|对于firefox，您可以使用javascript验证输入：|4559116|http://jsfiddle.net/VmtF5/|4559117|更新2018-03-12:浏览器支持更好，现在受以下支持：|BOLD|4559118|4559119|Chrome+6%2B|unordered-list-item|4559120|Firefox+29%2B|4559121|+10.1%2B|4559122|Safari浏览器10%2B)|4559123|4559124|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/SPqY3/|1^0|5|N|0|3|Q|0|0|A|D|0|0|0|Q|1|0|0|D|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|H|3|I|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1K|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|N|3|O|5|6|7|1P|8|@$9|1Q|A|1R|B|P]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|1T|8|@]|D|@]|E|$]]|$1|U|3|V|5|T|7|1U|8|@]|D|@]|E|$]]|$1|W|3|X|5|T|7|1V|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|T|7|1W|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|M]]]]

<p>You can use an <code>&lt;input type="number" /&gt;</code>. This will only allow numbers to be entered into othe input box.</p>

<p>Example: <a href="http://jsfiddle.net/SPqY3/" rel="nofollow noreferrer">http://jsfiddle.net/SPqY3/</a></p>

<p>Please note that the input <code>type="number"</code> tag is only supported in newer browsers.</p>

<p>For firefox, you can validate the input by using javascript:</p>

<p><a href="http://jsfiddle.net/VmtF5/" rel="nofollow noreferrer">http://jsfiddle.net/VmtF5/</a></p>

<p><strong>Update 2018-03-12:</strong> Browser support is much better now it's supported by the following:</p>

<ul>
<li>Chrome 6+</li>
<li>Firefox 29+</li>
<li>Opera 10.1+</li>
<li>Safari 5+</li>
<li>Edge</li>
<li>(Internet Explorer 10+)</li>
</ul>


blocks|key|128539|text|如果你可以使用HTML5，你可以做<input+type="number"+/>，如果不能，你将不得不通过javascript来做，就像你所说的，它不会被提交到代码背后去做。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|128540|<input+id="numbersOnly"+onkeypress='validate()'+/>

function+validate(){
++var+returnString;
++var+text+=+document.getElementByID('numbersOnly').value;
++var+regex+=+/[0-9]%7C\./;
++var+anArray+=+text.split('');
++for(var+i=0;+i<anArray.length;+i%2B%2B){
+++if(!regex.test(anArray[i]))
+++{
+++++anArray[i]+=+'';
+++}
++}
++for(var+i=0;+i<anArray.length;+i%2B%2B)+{
++++returnString+%2B=+anArray[i];
++}
++document.getElementByID('numbersOnly').value+=+returnString;
}|code-block|syntax|javascript|128541|P.S没有测试代码，但如果没有检查拼写错误，它应该或多或少是正确的:D你可能想添加更多的东西，比如如果字符串是null或空的，等等，你也可以更快地这样做:D|128542|entityMap^0|H|N|0|0|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|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>if you can use HTML5 you can do <code>&lt;input type="number" /&gt;</code>
If not you will have to either do it through javascript as you said it doesnt get submited to do it from codebehind.</p>

<pre><code>&lt;input id="numbersOnly" onkeypress='validate()' /&gt;

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i&lt;anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i&lt;anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}
</code></pre>

<p>P.S didnt test the code but it should be more or less correct if not check for typos :D
You might wanna add a few more things like what to do if the string is null or empty etc.
Also you could make this quicker :D</p>


blocks|key|4559188|text|我把这个用在邮政编码上，又快又简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4559189|<input+type="text"+id="zip_code"+name="zip_code"+onkeypress="return+event.charCode+>+47+&&+event.charCode+<+58;"+pattern="[0-9]{5}"+required></input>|code-block|syntax|javascript|4559190|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 use this for Zip Codes, quick and easy.</p>

<pre><code>&lt;input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode &gt; 47 &amp;&amp; event.charCode &lt; 58;" pattern="[0-9]{5}" required&gt;&lt;/input&gt;
</code></pre>


blocks|key|4559223|text|<input+type="text"+name="myinput"+id="myinput"+onkeypress="return+isNumber(event);"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4559224|在js中：|unstyled|4559225|function+isNumber(e){
++++e+=+e+%7C%7C+window.event;
++++var+charCode+=+e.which+?+e.which+:+e.keyCode;
++++return+/\d/.test(String.fromCharCode(charCode));
}|4559226|或者你可以用一种复杂但有用的方式来写它：|4559227|<input+onkeypress="return+/\d/.test(String.fromCharCode(((event%7C%7Cwindow.event).which%7C%7C(event%7C%7Cwindow.event).which)));"+type="text"+name="myinput"+id="myinput"+/>|4559228|文字形式的Note:cross-browser和正则表达式。|offset|length|style|BOLD|4559229|entityMap^0|0|0|0|0|0|5|4|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|F|7|12|8|@]|9|@]|A|$]]]|T|$]]

<pre><code>&lt;input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" /&gt;
</code></pre>

<p>and in the js:</p>

<pre><code>function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}
</code></pre>

<p>or you can write it in a complicated bu useful way:</p>

<pre><code>&lt;input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" /&gt;
</code></pre>

<p><strong>Note</strong>:cross-browser and regex in literal.</p>


blocks|key|127885|text|如果不是整数集，则为+0|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|127886|<input+type="text"+id="min-value"+/>

$('#min-value').change(function+()
++++++++++++{+++
++++++++++++++++var+checkvalue+=+$('#min-value').val();
++++++++++++++++if+(checkvalue+!=+parseInt(checkvalue))
++++++++++++++++++++$('#min-value').val(0);
++++++++++++});|code-block|syntax|javascript|127887|entityMap^0|A|2|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><strong>if not integer set 0</strong></p>

<pre><code>&lt;input type="text" id="min-value" /&gt;

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
</code></pre>


blocks|key|127902|text|使用此代码时，不能在Mozilla+Firefox中使用"BackSpace按钮“，只能在Chrome47+&&+event.charCode+<+58;”pattern="0-9{5}“required>中使用退格键|type|unstyled|depth|inlineStyleRanges|entityRanges|data|127903|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>When using this code you cant use "BackSpace Button" in Mozilla Firefox you can only use backspace in Chrome  47 &amp;&amp; event.charCode &lt; 58;" pattern="[0-9]{5}" required></p>


blocks|key|127917|text|http://www.texotela.co.uk/code/jquery/numeric/+numeric+input感谢Leo+Vũ提到了这一点，当然还有TexoTela。使用测试页。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|127918|entityMap|0|LINK|mutability|MUTABLE|url|http://www.texotela.co.uk/code/jquery/numeric/|1^0|0|1A|0|1B|D|1|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]|$A|Q|B|R|1|S]]|C|$]]|$1|D|3|-4|5|6|7|T|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|K]]]]

<p><a href="http://www.texotela.co.uk/code/jquery/numeric/" rel="nofollow">http://www.texotela.co.uk/code/jquery/numeric/</a> <a href="http://www.texotela.co.uk/code/jquery/numeric/" rel="nofollow">numeric input</a> credits to Leo Vũ for mentioning this and of course TexoTela. with a test page.</p>


blocks|key|4077553|text|请看我的项目的跨浏览器过滤器的文本输入元素的值在您的网页上使用JavaScript语言：Input+Key+Filter。您可以将值筛选为整数、浮点数或编写自定义筛选器，如电话号码筛选器。输入整数的代码示例如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4077554|​|4077555|<!doctype+html>
<html+xmlns="http://www.w3.org/1999/xhtml"+>
<head>
++++<title>Input+Key+Filter+Test</title>
	<meta+name="author"+content="Andrej+Hristoliubov+anhr@mail.ru">
	<meta+http-equiv="Content-Type"+content="text/html;+charset=utf-8"/>
	
	
	<meta+http-equiv="X-UA-Compatible"+content="IE=9"/>
	
	<link+rel="stylesheet"+href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css"+type="text/css">		
	<script+type="text/javascript"+src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script+type="text/javascript"+src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer+field</h1>
<input+id="Integer">
<script>
	CreateIntFilter("Integer",+function(event){//onChange+event
			inputKeyFilter.RemoveMyTooltip();
			var+elementNewInteger+=+document.getElementById("NewInteger");
			var+integer+=+parseInt(this.value);
			if(inputKeyFilter.isNaN(integer,+this)){
				elementNewInteger.innerHTML+=+"";
				return;
			}
			//elementNewInteger.innerText+=+integer;//Uncompatible+with+FireFox
			elementNewInteger.innerHTML+=+integer;
		}
		
		//onblur+event.+Use+this+function+if+you+want+set+focus+to+the+input+element+again+if+input+value+is+NaN.+(empty+or+invalid)
		,+function(event){+inputKeyFilter.isNaN(parseInt(this.value),+this);+}
	);
</script>
+New+integer:+<span+id="NewInteger"></span>
</body>
</html>|code-block|syntax|javascript|4077556|4077557|另请参阅我的页面"Integer+field:"+of+the+example+of+the+input+key+filter|4077558|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/anhr/InputKeyFilter|1|https://anhr.github.io/InputKeyFilter/^0|18|G|0|0|0|0|0|8|1J|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]]]

<p>Please see my project of the cross-browser filter of value of the text input element on your web page using JavaScript language: <a href="https://github.com/anhr/InputKeyFilter" rel="nofollow noreferrer">Input Key Filter</a> . You can filter the value as an integer number, a float number, or write a custom filter, such as a phone number filter. See an example of code of input an integer number:</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;!doctype html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;head&gt;
    &lt;title&gt;Input Key Filter Test&lt;/title&gt;
	&lt;meta name="author" content="Andrej Hristoliubov anhr@mail.ru"&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
	
	&lt;!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible --&gt;
	&lt;meta http-equiv="X-UA-Compatible" content="IE=9"/&gt;
	
	&lt;link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css"&gt;		
	&lt;script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"&gt;&lt;/script&gt;
	
&lt;/head&gt;
&lt;body&gt;
	&lt;h1&gt;Integer field&lt;/h1&gt;
&lt;input id="Integer"&gt;
&lt;script&gt;
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
&lt;/script&gt;
 New integer: &lt;span id="NewInteger"&gt;&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Also see my page <a href="https://anhr.github.io/InputKeyFilter/" rel="nofollow noreferrer">"Integer field:" of the example of the input key filter</a></p>


blocks|key|4077560|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077561|function+AllowOnlyNumbers(e)+{

e+=+(e)+?+e+:+window.event;
var+clipboardData+=+e.clipboardData+?+e.clipboardData+:+window.clipboardData;
var+key+=+e.keyCode+?+e.keyCode+:+e.which+?+e.which+:+e.charCode;
var+str+=+(e.type+&&+e.type+==+"paste")+?+clipboardData.getData('Text')+:+String.fromCharCode(key);

return+(/%5E\d%2B$/.test(str));
}|code-block|syntax|javascript|4077562|<h1>Integer+Textbox</h1>
++++<input+type="text"+autocomplete="off"+id="txtIdNum"+onkeypress="return+AllowOnlyNumbers(event);"+/>|4077563|4077564|JSFiddle：https://jsfiddle.net/ug8pvysc/|offset|length|4077565|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/ug8pvysc/^0|0|0|0|0|9|U|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<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 AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type &amp;&amp; e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Integer Textbox&lt;/h1&gt;
    &lt;input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" /&gt;</code></pre>
</div>
</div>
</p>

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


blocks|key|127949|text|<input+
++++onkeyup="value=isNaN(parseFloat(value))?1000:value"+
+++++++type="number"+
++++++value="1000"
>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|127950|onkeyup在释放键时触发。|unstyled|offset|length|style|CODE|127951|isNaN(parseFloat(value))?检查输入值是否不是数字。|127952|如果它不是数字，则将该值设置为1000+:。如果它是一个数字，则将该值设置为该值。|127953|备注:由于某种原因，只能与type="number"一起使用|BOLD|127954|为了让它更令人兴奋，你还可以设置一个边界：|127955|<input+
++++onkeyup="value=isNaN(parseFloat(value))%7C%7Cvalue<0%7C%7Cvalue>9000?1000:value"
+++++++type="number"
++++++value="1000"
>|127956|享受吧！|127957|entityMap^0|0|0|7|0|0|P|0|K|1|0|0|A|D|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|10|8|@$G|11|H|12|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|13|8|@$G|14|H|15|I|J]]|9|@]|A|$]]|$1|M|3|N|5|F|7|16|8|@$G|17|H|18|I|J]]|9|@]|A|$]]|$1|O|3|P|5|F|7|19|8|@$G|1A|H|1B|I|Q]|$G|1C|H|1D|I|J]]|9|@]|A|$]]|$1|R|3|S|5|F|7|1E|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1F|8|@]|9|@]|A|$B|C]]|$1|V|3|W|5|F|7|1G|8|@]|9|@]|A|$]]|$1|X|3|-4|5|F|7|1H|8|@]|9|@]|A|$]]]|Y|$]]

<pre><code>&lt;input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
&gt;
</code></pre>

<p><code>onkeyup</code> triggers when the key is released. </p>

<p><code>isNaN(parseFloat(value))?</code> checks if the input value is not a number. </p>

<p>If it is not a number the value is set to 1000 <code>:</code> If it is a number the value is set to the value.</p>

<p><strong>note:</strong> For some reason it only works with <code>type="number"</code></p>

<p>To make it even more exiting, you can also have a boundary:</p>

<pre><code>&lt;input 
    onkeyup="value=isNaN(parseFloat(value))||value&lt;0||value&gt;9000?1000:value"
       type="number"
      value="1000"
&gt;
</code></pre>

<p>Enjoy!</p>


blocks|key|727831|text|我和这个人斗争了一段时间。这里和其他地方的许多解决方案似乎都很复杂。这个解决方案使用jQuery/javascript和超文本标记语言。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|727832|++++<input+type="number"+min="1"+class="validateNumber">

++++$(document).on('change',+'.validateNumber',+function()+{+
++++++++var+abc+=+parseInt($(this).val());
++++++++if(isNaN(abc))+{+abc+=+1;+}
++++++++$(this).val(abc);
++++});|code-block|syntax|javascript|727833|在我的例子中，我跟踪的是最小值为1的小数量，因此输入标记中的min=为“1”，isNaN()检查中的abc+=1。对于仅为正的数字，您可以将这些值更改为0，甚至可以简单地从输入标记中删除min="1“以允许使用负数。|727834|此外，这也适用于多个框(并且可以节省一些加载时间，而不是单独使用id)，只需在需要的地方添加"validateNumber“类即可。|727835|解释|727836|除了返回NaN而不是某个整数值之外，parseInt()基本上做了您需要做的事情。只需一个简单的if()，您就可以在返回NaN的所有情况下设置您喜欢的“回退”值:-)。此外，W3还声明here，NaN的全局版本将在检查之前进行类型转换，这会提供一些额外的校对(Number.isNaN()不会这样做)。发送到服务器/后端的任何值都应该在那里进行验证！|727837|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_isnan.asp^0|16|H|0|0|0|0|0|2K|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>I fought with this one for a bit. Many solutions here and elsewhere seemed complicated. This solution uses <strong>jQuery/javascript</strong> alongside HTML.</p>

<pre><code>    &lt;input type="number" min="1" class="validateNumber"&gt;

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });
</code></pre>

<p>In my case I was tracking small quantities with a minimum value of 1, hence the min="1" in the input tag and abc = 1 in the isNaN() check. For positive only numbers you could change those values to 0 and even simply remove the min="1" from the input tag to allow for negative numbers. </p>

<p>Also this works for multiple boxes (and could save you some load time over doing them individually by id), just add the "validateNumber" class where needed.</p>

<p><em>Explanation</em></p>

<p>parseInt() basically does what you need, except that it returns NaN rather than some integer value. With a simple if() you can set the "fallback" value that you prefer in all the cases NaN is returned :-). 
Also W3 states <a href="http://www.w3schools.com/jsref/jsref_isnan.asp" rel="nofollow">here</a> that the global version of NaN will type cast before checking which gives some extra proofing (Number.isNaN() does not do that). 
Any values sent to a server/backend should still be validated there!</p>


blocks|key|128003|text|公认的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128004|function+isNumberKey(evt){
++++var+charCode+=+(evt.which)+?+evt.which+:+event.keyCode
++++if+(charCode+>+31+&&+(charCode+<+48+%7C%7C+charCode+>+57))
++++++++return+false;
++++return+true;
}|code-block|syntax|javascript|128005|它很好，但并不完美。这对我来说是可行的，但我得到了一个警告，即if语句可以简化。|128006|然后它看起来像这样，哪个更漂亮：|128007|function+isNumberKey(evt){
++++var+charCode+=+(evt.which)+?+evt.which+:+event.keyCode;
++++return+!(charCode+>+31+&&+(charCode+<+48+%7C%7C+charCode+>+57));
}|128008|我会评论最初的帖子，但我的声誉太低了，不能这样做(刚刚创建了这个帐户)。|128009|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|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The accepted answer:</p>

<pre><code>function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57))
        return false;
    return true;
}
</code></pre>

<p>It's good but not perfect. It works out for me, but i get a warning that the if-statement can be simplified.</p>

<p>Then it looks like this, which is way prettier:</p>

<pre><code>function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57));
}
</code></pre>

<p>Would comment the original post, but my reputation is too low to do so (just created this account).</p>


blocks|key|727926|text|您可以将<input>标记与属性type='number‘一起使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|727927|例如，您可以使用<input+type='number'+/>|727928|此输入字段仅允许数值。您还可以指定此字段应接受的最小值和最大值。|727929|entityMap^0|4|7|0|8|N|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p>You can use the <code>&lt;input&gt;</code> tag with attribute type='number'.</p>

<p>For example you can use <code>&lt;input type='number' /&gt;</code></p>

<p>This input field allows only numerical values.
You can also specify the minimum value and maximum value that should be accepted by this field.</p>


blocks|key|4077824|text|最好在REGEX条件中加上"%2B“，以便接受多个数字(而不仅仅是一个数字)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077825|<input+type="text"+name="your_field"+pattern="[0-9]%2B">|offset|length|style|CODE|4077826|entityMap^0|0|0|1I|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>It's better to add "+" to REGEX condition in order to accept multiple digits (not only one digit):</p>

<p><code>&lt;input type="text" name="your_field" pattern="[0-9]+"&gt;</code></p>


blocks|key|4077844|text|请尝试使用此代码和输入字段本身|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077845|<input+type="text"+name="price"+id="price_per_ticket"+class="calculator-input"+onkeypress="return+event.charCode+>=+48+&&+event.charCode+<=+57"></div>|code-block|syntax|javascript|4077846|它会工作得很好。|4077847|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>Please try this code along with the input field itself</p>

<pre><code>&lt;input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57"&gt;&lt;/div&gt;
</code></pre>

<p>it will work fine.</p>


blocks|key|4077862|text|对于一般用途，您可以进行如下JS验证：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077863|它将适用于数字键盘和普通数字键|4077864|function+isNumberKey(evt){
++++++++var+charCode+=+(evt.which)+?+evt.which+:+event.keyCode

if+(charCode+<+31+%7C%7C+(charCode+>=+48+&&+charCode+<=+57+)+%7C%7C+(charCode+>=+96+&&+charCode+<=+105+))
++++++++return+true;
++++return+false;
}

<input+name="someid"+type="number"+onkeypress="return+isNumberKey(event)"/>|code-block|syntax|javascript|4077865|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>For general purpose, you can have JS validation as below:</p>

<p>It will work for Numeric keypad and normal number key's </p>

<pre><code>function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode &lt; 31 || (charCode &gt;= 48 &amp;&amp; charCode &lt;= 57 ) || (charCode &gt;= 96 &amp;&amp; charCode &lt;= 105 ))
        return true;
    return false;
}

&lt;input name="someid" type="number" onkeypress="return isNumberKey(event)"/&gt;
</code></pre>


blocks|key|4559670|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4559671|在输入标记内添加:+onkeyup="value=value.replace(/%5E\d/g，'')“|4559672|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p></p>

<p>Add inside your input tag:  onkeyup="value=value.replace(/[^\d]/g,'')"</p>


blocks|key|4077942|text|我使用正则表达式将输入值替换为所需的模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4077943|​|4077944|var+userName+=+document.querySelector('#numberField');

userName.addEventListener('input',+restrictNumber);
function+restrictNumber+(e)+{++
++var+newValue+=+this.value.replace(new+RegExp(/[%5E\d]/,'ig'),+"");
++this.value+=+newValue;
}|code-block|syntax|javascript|4077945|<input+type="text"+id="numberField">|4077946|4077947|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>I have used regular expression to replace the input value with the pattern needed.</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>var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="numberField"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4078013|text|我更新了一些发布的答案，添加了以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4078014|4078015|Add+the+method+as+extension+method|unordered-list-item|4078016|Allow+one+point+to+entered|4078017|Specify多少位小数点是允许的。|4078018|4078019|String.prototype.isDecimal+=函数isDecimal(evt，decimalPts)+{调试器；var+charCode+=+(evt.which)？evt.which+:+event.keyCode+if+(charCode+>+31+&&+(charCode+!=+46+&&+(charCode+<+48+%7C%7C+charCode+>57)返回false；//禁止超过一个if+(charCode+==+46+&&+this.includes("."))返回false；//如果(this.includes("."))+{+var+number+=+[]；number+=+this.split(".")；if+(number+1.length+==+decimalPts)返回false；}返回true；};，则限制需要的小数位数|4078020|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|P|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|S|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>I updated some answers posted to add the following:</p>

<ul>
<li>Add the method as extension method</li>
<li>Allow only one point to be entered</li>
<li><p>Specify how many numbers after the decimal point is allowed.</p>

<pre><code>String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode &gt; 31 &amp;&amp; (charCode != 46 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 &amp;&amp; this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
</code></pre></li>
</ul>


blocks|key|728276|text|快速而简单的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|728277|<input+type="text"+onkeypress="return+(event.charCode+!=8+&&+event.charCode+==0+%7C%7C+(event.charCode+>=+48+&&+event.charCode+<=+57))"+/>|code-block|syntax|javascript|728278|这将只允许使用数字和退格键。|728279|如果您还需要小数部分，请使用以下代码片段|728280|<input+type="text"+onkeypress="return+(event.charCode+!=8+&&+event.charCode+==0+%7C%7C+(+event.charCode+==+46+%7C%7C+(event.charCode+>=+48+&&+event.charCode+<=+57)))"+/>|728281|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Quick and Easy Code</p>

<pre><code>&lt;input type="text" onkeypress="return (event.charCode !=8 &amp;&amp; event.charCode ==0 || (event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57))" /&gt;
</code></pre>

<p>This will permit usage of numbers and backspace only.</p>

<p>If you need decimal part too, use this code fragment</p>

<pre><code>&lt;input type="text" onkeypress="return (event.charCode !=8 &amp;&amp; event.charCode ==0 || ( event.charCode == 46 || (event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57)))" /&gt;
</code></pre>


blocks|key|728373|text|一种方法是拥有一个允许的字符代码数组，然后使用Array.includes函数查看是否允许输入字符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|728374|示例：|BOLD|728375|<input+type="text"+onkeypress="return+[45,+48,+49,+50,+51,+52,+53,+54,+55,+56,+57].includes(event.charCode);"/>|code-block|syntax|javascript|728376|entityMap^0|N|E|0|0|3|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|@$9|T|A|U|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|V|8|@]|D|@]|E|$L|M]]|$1|N|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|O|$]]

<p>One way could be to have an array of allowed character codes and then use the <code>Array.includes</code> function to see if entered character is allowed. </p>

<p><strong>Example:</strong></p>

<pre><code>&lt;input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/&gt;
</code></pre>


blocks|key|4559902|text|够简单吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4559903|​|4559904|inputField.addEventListener('input',+function+()+{
++if+((inputField.value/inputField.value)+!==+1)+{
++++console.log("Please+enter+a+number");
++}
});|code-block|syntax|javascript|4559905|<input+id="inputField"+type="text">|4559906|4559907|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>Simple enough?</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>inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="inputField" type="text"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4559963|text|还有另一种效果很好的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4559964|<input+type="text"+name="celular"+placeholder="Ej.+6756892"+maxlength="8"+id="telefono"+++oninput="this.value+=+this.value.replace(/[%5E0-9.]/g,+'').replace(/(\..*)\./g,+'$1');"+>|code-block|syntax|javascript|4559965|此修复的伟大之处在于，复制粘贴的值也包含在规则中。|4559966|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>Yet another method that works pretty well.</p>
<pre><code>&lt;input type=&quot;text&quot; name=&quot;celular&quot; placeholder=&quot;Ej. 6756892&quot; maxlength=&quot;8&quot; id=&quot;telefono&quot;   oninput=&quot;this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');&quot; &gt;
</code></pre>
<p>What's great about this fix is that copy-pasted values are also included in the rule.</p>


blocks|key|728486|text|使用<input+type="number">，它只接受数字形式的输入。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|728487|尝试使用非数字值提交下面的两个表单。|728488|​|728489|<form>

+<input+type="number">
+<button>SUBMIT</button>
+</form>|code-block|syntax|javascript|728490|728491|较旧的浏览器不支持type=number。所以我们可以用JavaScript来验证它：|728492|728493|<form+onsubmit=
+"if+(isNaN(document.getElementById('validatethis').value))+return+false;">

+<input+type="text"+id="validatethis">
+<button>SUBMIT</button>
+</form>|728494|728495|entityMap^0|2|L|0|0|0|0|0|9|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|R|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|U|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|W|$]]

<p>Use <code>&lt;input type=&quot;number&quot;&gt;</code>, it only accepts inputs that are numbers.<br />
Try submitting the two forms below with non number values.</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;form&gt;
&lt;!-- some code --&gt;
 &lt;input type="number"&gt;
 &lt;button&gt;SUBMIT&lt;/button&gt;
 &lt;/form&gt;</code></pre>
</div>
</div>
</p>
<p>Older browsers don’t support <code>type=number</code>. So we can validate it with JavaScript:</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;form onsubmit=
 "if (isNaN(document.getElementById('validatethis').value)) return false;"&gt;
&lt;!-- some code --&gt;
 &lt;input type="text" id="validatethis"&gt;
 &lt;button&gt;SUBMIT&lt;/button&gt;
 &lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4078287|text|您可以使用以下一行代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4078288|<input+type="text"+onkeypress="return+/[0-9]/i.test(event.key)"+>|code-block|syntax|javascript|4078289|它只接受数字。|4078290|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 use following one line code as :</p>
<pre><code>&lt;input type=&quot;text&quot; onkeypress=&quot;return /[0-9]/i.test(event.key)&quot; &gt;
</code></pre>
<p>It will accept numbers ony.</p>


blocks|key|4078342|text|你可以通过一行来使用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4078343|<input+onkeypress="return+/[0-9]/i.test(event.key)"+>|code-block|syntax|javascript|4078344|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><strong>You can use it by one line</strong></p>
<pre><code>&lt;input onkeypress=&quot;return /[0-9]/i.test(event.key)&quot; &gt;
</code></pre>


blocks|key|4560121|text|公认的答案已经很好了，但是，如果您希望您的用户能够导航他们的输入(通过使用向左或向右的光标键)，并可能修改他们的输入(通过使用键盘上的delete或backspace键)，您可以选择使用此方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4560122|该方法的另一个优点是除了接受来自数字小键盘的数字之外，还接受来自键盘顶行的数字。|4560123|输入的HTML元素将如下所示...|4560124|<input+type="number"
++onkeydown="return+validateIsNumericInput(event)"
++...
++any+other+attributes+for+the+input+element
>|code-block|syntax|javascript|4560125|JavaScript函数将如下所示：|4560126|/**
Checks+the+ASCII+code+input+by+the+user+is+one+of+the+following:
++++-+Between+48+and+57:+Numbers+along+the+top+row+of+the+keyboard
++++-+Between+96+and+105:+Numbers+in+the+numeric+keypad
++++-+Either+8+or+46:+The+backspace+and+delete+keys+enabling+user+to+change+their+input
++++-+Either+37+or+39:+The+left+and+right+cursor+keys+enabling+user+to+navigate+their+input
+*/

function+validateIsNumericInput(evt)+{
++++var+ASCIICode+=+(evt.which)+?+evt.which+:+evt.keyCode
++++permittedKeys+=+[8,+46,+37,+39]
++++if+((ASCIICode+>=+48+&&+ASCIICode+<=+57)+%7C%7C+(ASCIICode+>=+96+&&+ASCIICode+<=+105))+{
++++++++return+true;
++++};
++++if+(permittedKeys.includes(ASCIICode))+{
++++++++return+true;
++++};
++++return+false;
}|4560127|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|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The accepted answer is already good, however if your requirement is that you would like your user to be able to navigate their input (by using either the left or right cursor keys) and possibly amend their input (by using either the delete or the backspace key on the keyboard), you may choose to use this method.</p>
<p>Another benefit of this method is that accepts numbers from both the top row of the keyboard in addition to numbers from the numeric keypad.</p>
<p>The input HTML element will look something like this...</p>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;number&quot;
  onkeydown=&quot;return validateIsNumericInput(event)&quot;
  ...
  any other attributes for the input element
&gt;
</code></pre>
<p>The JavaScript function will look like this:</p>
<pre class="lang-js prettyprint-override"><code>/**
Checks the ASCII code input by the user is one of the following:
    - Between 48 and 57: Numbers along the top row of the keyboard
    - Between 96 and 105: Numbers in the numeric keypad
    - Either 8 or 46: The backspace and delete keys enabling user to change their input
    - Either 37 or 39: The left and right cursor keys enabling user to navigate their input
 */

function validateIsNumericInput(evt) {
    var ASCIICode = (evt.which) ? evt.which : evt.keyCode
    permittedKeys = [8, 46, 37, 39]
    if ((ASCIICode &gt;= 48 &amp;&amp; ASCIICode &lt;= 57) || (ASCIICode &gt;= 96 &amp;&amp; ASCIICode &lt;= 105)) {
        return true;
    };
    if (permittedKeys.includes(ASCIICode)) {
        return true;
    };
    return false;
}
</code></pre>


blocks|key|4560144|text|据我所知，您希望在文本输入框中只允许数值。作为一个初学者，我也在与这个逻辑作斗争。这个问题可以在ES6中简单地解决。下面是我想出的最简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4560145|function+test(){
++++for+(var+i+=+0;+i+<+document.getElementById("element").value.length;+i%2B%2B)+{
++++++++if+(isNaN(document.getElementById("element").value[i])){
++++++++++++document.getElementById("element").value+=+'';
++++++++++++console.log(document.getElementById("element").value[i])
++++++++}
++++};
}|code-block|syntax|javascript|4560146|请注意，此代码不适用于浮点数！|4560147|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>From my understanding, you want to only allow numerical values in a text input box. I also struggled with this logic as I am a beginner. This problem can be simply solved in ES6.Here is the most simplest solution I came up with:</p>
<pre class="lang-js prettyprint-override"><code>function test(){
    for (var i = 0; i &lt; document.getElementById(&quot;element&quot;).value.length; i++) {
        if (isNaN(document.getElementById(&quot;element&quot;).value[i])){
            document.getElementById(&quot;element&quot;).value = '';
            console.log(document.getElementById(&quot;element&quot;).value[i])
        }
    };
}
</code></pre>
<p>Please note that this code does not work for floating-point-numbers!</p>


<p>I need to make sure that a certain <code>&lt;input&gt;</code> field only takes numbers as value.
The input is not part of a form. Hence it doesn't get submitted, so validating during submission is not an option. I want the user to be unable to type in any characters other than numbers.</p>

<p>Is there a neat way to achieve this?</p>


How to make HTML input tag only accept numerical values?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我需要确保某个<input>字段只接受数字作为值。输入不是表单的一部分。因此，它不会被提交，所以在提交过程中验证不是一个选项。我希望用户不能键入除数字以外的任何字符。有没有一种很好的方法来实现这一点？

问如何让HTML输入标签只接受数值？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让HTML输入标签只接受数值？EN