blocks|key|196344|text|使用<input+type="number"...>怎么样？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|196345|http://www.w3schools.com/tags/tag_input.asp|196346|另外，这里是a+question+that+has+some+examples+of+using+Javascript+for+validation。|196347|更新:链接到更好的问题(感谢alexblum)。|196348|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|414495|text|您还可以在html5中使用pattern属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414496|<input+type="text"+name="name"+pattern="[0-9]"+title="Title"+/>+|code-block|syntax|javascript|414497|Input+validation+tutorial|offset|length|414498|不过，如果您的文档类型不是html，那么我认为您需要使用一些javascript/jquery。|style|CODE|414499|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|414504|text|如果你可以使用HTML5，你可以做<input+type="number"+/>，如果不能，你将不得不通过javascript来做，就像你所说的，它不会被提交到代码背后去做。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|414505|<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|414506|P.S没有测试代码，但如果没有检查拼写错误，它应该或多或少是正确的:D你可能想添加更多的东西，比如如果字符串是null或空的，等等，你也可以更快地这样做:D|414507|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|414516|text|我把这个用在邮政编码上，又快又简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414517|<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|414518|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|196481|text|使用此代码时，不能在Mozilla+Firefox中使用"BackSpace按钮“，只能在Chrome47+&&+event.charCode+<+58;”pattern="0-9{5}“required>中使用退格键|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196482|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|414574|text|http://www.texotela.co.uk/code/jquery/numeric/+numeric+input感谢Leo+Vũ提到了这一点，当然还有TexoTela。使用测试页。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|414575|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|414605|text|请看我的项目的跨浏览器过滤器的文本输入元素的值在您的网页上使用JavaScript语言：Input+Key+Filter。您可以将值筛选为整数、浮点数或编写自定义筛选器，如电话号码筛选器。输入整数的代码示例如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|414606|​|414607|<!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|414608|414609|另请参阅我的页面"Integer+field:"+of+the+example+of+the+input+key+filter|414610|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|414626|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414627|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|414628|<h1>Integer+Textbox</h1>
++++<input+type="text"+autocomplete="off"+id="txtIdNum"+onkeypress="return+AllowOnlyNumbers(event);"+/>|414629|414630|JSFiddle：https://jsfiddle.net/ug8pvysc/|offset|length|414631|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|196589|text|公认的答案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196590|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|196591|它很好，但并不完美。这对我来说是可行的，但我得到了一个警告，即if语句可以简化。|196592|然后它看起来像这样，哪个更漂亮：|196593|function+isNumberKey(evt){
++++var+charCode+=+(evt.which)+?+evt.which+:+event.keyCode;
++++return+!(charCode+>+31+&&+(charCode+<+48+%7C%7C+charCode+>+57));
}|196594|我会评论最初的帖子，但我的声誉太低了，不能这样做(刚刚创建了这个帐户)。|196595|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|414712|text|您可以将<input>标记与属性type='number‘一起使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|414713|例如，您可以使用<input+type='number'+/>|414714|此输入字段仅允许数值。您还可以指定此字段应接受的最小值和最大值。|414715|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|414758|text|最好在REGEX条件中加上"%2B“，以便接受多个数字(而不仅仅是一个数字)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414759|<input+type="text"+name="your_field"+pattern="[0-9]%2B">|offset|length|style|CODE|414760|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|414798|text|请尝试使用此代码和输入字段本身|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414799|<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|414800|它会工作得很好。|414801|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|196763|text|对于一般用途，您可以进行如下JS验证：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196764|它将适用于数字键盘和普通数字键|196765|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|196766|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|196817|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196818|在输入标记内添加:+onkeyup="value=value.replace(/%5E\d/g，'')“|196819|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|196844|text|我使用正则表达式将输入值替换为所需的模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196845|​|196846|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|196847|<input+type="text"+id="numberField">|196848|196849|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|414980|text|快速而简单的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|414981|<input+type="text"+onkeypress="return+(event.charCode+!=8+&&+event.charCode+==0+%7C%7C+(event.charCode+>=+48+&&+event.charCode+<=+57))"+/>|code-block|syntax|javascript|414982|这将只允许使用数字和退格键。|414983|如果您还需要小数部分，请使用以下代码片段|414984|<input+type="text"+onkeypress="return+(event.charCode+!=8+&&+event.charCode+==0+%7C%7C+(+event.charCode+==+46+%7C%7C+(event.charCode+>=+48+&&+event.charCode+<=+57)))"+/>|414985|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|415012|text|够简单吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415013|​|415014|inputField.addEventListener('input',+function+()+{
++if+((inputField.value/inputField.value)+!==+1)+{
++++console.log("Please+enter+a+number");
++}
});|code-block|syntax|javascript|415015|<input+id="inputField"+type="text">|415016|415017|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|196944|text|还有另一种效果很好的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|196945|<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|196946|此修复的伟大之处在于，复制粘贴的值也包含在规则中。|196947|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|415084|text|使用<input+type="number">，它只接受数字形式的输入。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|415085|尝试使用非数字值提交下面的两个表单。|415086|​|415087|<form>

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

+<input+type="text"+id="validatethis">
+<button>SUBMIT</button>
+</form>|415092|415093|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|415119|text|您可以使用以下一行代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415120|<input+type="text"+onkeypress="return+/[0-9]/i.test(event.key)"+>|code-block|syntax|javascript|415121|它只接受数字。|415122|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|415170|text|公认的答案已经很好了，但是，如果您希望您的用户能够导航他们的输入(通过使用向左或向右的光标键)，并可能修改他们的输入(通过使用键盘上的delete或backspace键)，您可以选择使用此方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415171|该方法的另一个优点是除了接受来自数字小键盘的数字之外，还接受来自键盘顶行的数字。|415172|输入的HTML元素将如下所示...|415173|<input+type="number"
++onkeydown="return+validateIsNumericInput(event)"
++...
++any+other+attributes+for+the+input+element
>|code-block|syntax|javascript|415174|JavaScript函数将如下所示：|415175|/**
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;
}|415176|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|415242|text|据我所知，您希望在文本输入框中只允许数值。作为一个初学者，我也在与这个逻辑作斗争。这个问题可以在ES6中简单地解决。下面是我想出的最简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415243|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|415244|请注意，此代码不适用于浮点数！|415245|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?

HTML5

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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