我需要确保一定<input>字段只需要数字作为值。 输入不是一个形式的一部分。 因此，它不会提交，那么在提交确认是不是一种选择。 我希望用户无法在输入数字以外的任何字符。
是否有一个整洁的方式来实现这一目标？
Answer 1:
HTML 5
您可以使用HTML5输入类型数量仅限制参赛人数：
<input type="number" name="someid" />
这将在HTML5投诉浏览器只工作。 确保你的HTML文档的DOCTYPE是：
<!DOCTYPE html>
又见https://github.com/jonstipe/number-polyfill在旧版浏览器的透明支持。
JavaScript的
更新：对于这个新的和非常简单的解决方案：
它允许你使用任何类型的输入滤波器上的文本
<input>包括各种数字滤波器。 这将正确处理复制+粘贴，拖动+下降，键盘快捷键，右键菜单操作，不可分型按键，和所有的键盘布局。
见这个答案或者自己尝试上的jsfiddle 。
对于一般用途，可以有JS验证如下：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
如果你想允许小数的这种替换“如果条件”：
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
来源： HTML文本输入只允许数字输入
的jsfiddle演示： http://jsfiddle.net/viralpatel/nSjy7/
Answer 2:
您还可以使用HTML5中的模式属性：
<input type="text" name="name" pattern="[0-9]" title="Title" />
输入验证教程
虽然，如果你的DOCTYPE是不是html话，我认为你需要使用一些JavaScript / jQuery的。
Answer 3:
请试试这个代码与输入字段本身沿
<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>
它将很好地工作。
Answer 4:
你可以使用一个<input type="number" /> 这将只允许进入行吟诗人输入框中的数字。
例如： http://jsfiddle.net/SPqY3/
请注意，输入type="number"标签仅在新的浏览器支持。
对于Firefox，您可以使用JavaScript验证输入：
http://jsfiddle.net/VmtF5/
更新2018年3月12日：浏览器支持现在好多了它是由以下支持：
- 铬6+
- 火狐29+
- 歌剧10.1+
- Safari 5以上
- 边缘
- （IE浏览器10+）
Answer 5:
<input
onkeyup="value=isNaN(parseFloat(value))?1000:value"
type="number"
value="1000"
>
onkeyup按键被释放时触发。
isNaN(parseFloat(value))? 检查，如果输入值是不是数字。
如果不是一个数字的值设置为1000 :如果它是一个数字的值设置为值。
注：出于某种原因，它只能工作type="number"
为了使其更加退出时，你也可以有一个边界：
<input
onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
type="number"
value="1000"
>
请享用！
Answer 6:
我用这一个有点斗争。 这里和其他地方的许多解决方案似乎复杂。 该解决方案使用的jQuery / JavaScript的 HTML一起。
<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);
});
在我的情况下，我正在跟踪少量具有1的最小值，因此在isNaN（）检查输入的标签和ABC = 1分钟=“1”。 对于正只有数字，你可以改变这些值设置为0，甚至简单地从输入标签移除分钟=“1”，以允许负数。
这也适用于多箱（并且可能一些加载时间为您节省了由单独的ID做他们），只需添加在需要时“validateNumber”级。
说明
parseInt函数（）基本上没有你所需要的，只是它返回NaN，而不是某个整数值。 用一个简单的，如果（），您可以设置您所:-)返回NaN的所有情况下更喜欢使用“回退”值。 此外W3状态这里楠的全球版本将类型检查前投这就给了一些额外的打样（Number.isNaN（）不这样做）。 发送到服务器/后端的任何值仍然应该有验证！
Answer 7:
function AllowOnlyNumbers(e) { e = (e) ? e : window.event; var key = null; var charsKeys = [ 97, // a Ctrl + a Select All 65, // A Ctrl + A Select All 99, // c Ctrl + c Copy 67, // C Ctrl + C Copy 118, // v Ctrl + v paste 86, // V Ctrl + V paste 115, // s Ctrl + s save 83, // S Ctrl + S save 112, // p Ctrl + p print 80 // P Ctrl + P print ]; var specialKeys = [ 8, // backspace 9, // tab 27, // escape 13, // enter 35, // Home & shiftKey + # 36, // End & shiftKey + $ 37, // left arrow & shiftKey + % 39, //right arrow & ' 46, // delete & . 45 //Ins & - ]; key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; //console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode); //console.log(String.fromCharCode(key)); // check if pressed key is not number if (key && key < 48 || key > 57) { //Allow: Ctrl + char for action save, print, copy, ...etc if ((e.ctrlKey && charsKeys.indexOf(key) != -1) || //Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser (navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) { return true } // Allow: Special Keys else if (specialKeys.indexOf(key) != -1) { //Fix Issue: right arrow & Delete & ins in FireFox if ((key == 39 || key == 45 || key == 46)) { return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0); } //DisAllow : "#" & "$" & "%" //add e.altKey to prevent AltGr chars else if ((e.shiftKey || e.altKey) && (key == 35 || key == 36 || key == 37)) { return false; } else { return true; } } else { return false; } } else { return true; } } <h1>Integer Textbox</h1> <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" /> Answer 8:
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />
而在JS：
function isNumber(e){
e = e || window.event;
var charCode = e.which ? e.which : e.keyCode;
return /\d/.test(String.fromCharCode(charCode));
}
或者你可以在一个复杂的BU有用的方式写：
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
注 ：在字面跨浏览器和正则表达式。
Answer 9:
如果你可以使用HTML5，你可以做<input type="number" />如果不是，你将不得不要么通过JavaScript做它，你说它不得到submited从代码隐藏做到这一点。
<input id="numbersOnly" onkeypress='validate()' />
function validate(){
var returnString;
var text = document.getElementByID('numbersOnly').value;
var regex = /[0-9]|\./;
var anArray = text.split('');
for(var i=0; i<anArray.length; i++){
if(!regex.test(anArray[i]))
{
anArray[i] = '';
}
}
for(var i=0; i<anArray.length; i++) {
returnString += anArray[i];
}
document.getElementByID('numbersOnly').value = returnString;
}
PS没有测试的代码，但它应该是或多或少正确的，如果不是错别字检查：d你可能想添加一些更多的东西喜欢做什么，如果字符串为null或空等你也能做出这样快：d
Answer 10:
我已经使用正则表达式来替换所需要的图案的输入值。
var userName = document.querySelector('#numberField'); userName.addEventListener('input', restrictNumber); function restrictNumber (e) { var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), ""); this.value = newValue; } <input type="text" id="numberField"> Answer 11:
快易典
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
这将允许数量的使用和退格而已。
如果你需要小数部分也使用此代码片段
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
Answer 12:
如何使用<input type="number"...>
http://www.w3schools.com/tags/tag_input.asp
另外，这里是有使用JavaScript进行验证的一些例子问题 。
更新：挂更好的问题（感谢alexblum）。
Answer 13:
如果不是整数集合0
<input type="text" id="min-value" />
$('#min-value').change(function ()
{
var checkvalue = $('#min-value').val();
if (checkvalue != parseInt(checkvalue))
$('#min-value').val(0);
});
Answer 14:
接受的答案：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
这是很好的，但并不完美。 它的工作原理为我，但我得到的if语句可以简化警告。
然后，它看起来是这样的，这是更漂亮的方法：
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
评论将原来的职位，但我的名声太低这样做（刚创建此帐户）。
Answer 15:
可以使用<input>与属性类型=“编号”标记。
例如，你可以使用<input type='number' />
此输入字段仅允许数值。 您还可以指定应当由本领域所接受的最小值和最大值。
Answer 16:
请参阅使用JavaScript语言的网页上我的文字输入元素的值的跨浏览器的过滤器项目： 输入关键字过滤 。 您可以筛选值作为一个整数，浮点数，或编写自定义过滤器，如电话号码过滤器。 见的输入的整数的代码的示例：
<!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"/> <!-- 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 --> <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> 另请参阅我的页面“整型字段：”输入键过滤器的例子
Answer 17:
添加您输入标记内：的onkeyup = “值= value.replace（/ [^ \ d] /克， ''）”
Answer 18:
我更新发布到添加以下一些答案：
- 添加方法扩展方法
- 允许只输入一个点
指定多少个号码小数点后允许。
String.prototype.isDecimal = function isDecimal(evt,decimalPts) { debugger; var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) return false; //Prevent more than one point if (charCode == 46 && 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; };
Answer 19:
我用这个邮政编码，方便快捷。
<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
Answer 20:
当使用这种代码，你不能使用“退格按钮”在Mozilla Firefox你只能在Chrome使用退格键47 && event.charCode <58;”图案=‘[0-9] {5}’需要>
Answer 21:
http://www.texotela.co.uk/code/jquery/numeric/ 数字输入信用利奥似曾相识的提这个，当然TexoTela。 与测试页。
Answer 22:
对于一般用途，可以有JS验证如下：
它将为数字键盘和正常的数字键的工作
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
return true;
return false;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
Answer 23:
这是更好地加上“+”，以正则表达式的条件，以接受多个数字（不只是一个数字）：
<input type="text" name="your_field" pattern="[0-9]+">
文章来源: How to make HTML input tag only accept numerical values?
