如何使 HTML 输入标签只接受数值？
Posted
技术标签:
【中文标题】如何使 HTML 输入标签只接受数值？【英文标题】：How to make HTML input tag only accept numerical values? 【发布时间】：2012-12-06 19:45:06 【问题描述】：我需要确保某个<input> 字段仅将数字作为值。
输入不是表单的一部分。因此它不会被提交，因此在提交期间进行验证不是一种选择。我希望用户不能输入除数字以外的任何字符。
有没有一种巧妙的方法来实现这一点？
【问题讨论】：
***.com/questions/469357/… 看看这个[link][1]，它有足够的信息。 [1]：***.com/questions/469357/… 这个也可以派上用场：***.com/questions/995183/… 【参考方案1】：html 5
您可以使用HTML5 input type number 来限制仅输入数字：
<input type="number" name="someid" />
这仅适用于 HTML5 投诉浏览器。确保您的 html 文档的 doctype 是：
<!DOCTYPE html>
另请参阅https://github.com/jonstipe/number-polyfill，了解旧浏览器中的透明支持。
javascript
更新：有一个新的非常简单的解决方案：
它允许您对文本
<input>使用任何类型的输入过滤器， 包括各种数字过滤器。这将正确处理 复制+粘贴、拖放、键盘快捷键、上下文菜单操作、 不可键入的键和所有键盘布局。
查看this answer 或亲自尝试on JSFiddle。
出于一般目的，您可以进行 JS 验证，如下所示：
function isNumberKey(evt)
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
如果您想允许小数，请将“if 条件”替换为：
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
来源：HTML text input allow only numeric input
JSFiddle 演示：http://jsfiddle.net/viralpatel/nSjy7/
【讨论】：
是的，这在 Firefox 和 chrome 中都适用于我。很奇怪，这么简单的事情需要js。 在 chrome 30 中不起作用。在小提琴的“数字”输入中输入字母完全没有问题。嗯... 如果有人想输入像 8.9 这样的浮点值怎么办？ 为了更健壮的解决方案，还可以考虑复制和粘贴可以在此示例中添加字母！ 糟糕！第一行必须改为：var charCode = (evt.which) ? evt.which : evt.keyCode;【参考方案2】：
html5中也可以使用pattern属性：
<input type="text" name="name" pattern="[0-9]" title="Title" />
Input validation tutorial
不过，如果您的文档类型不是 html，那么我认为您需要使用一些 javascript/jquery。
【讨论】：
虽然firefox在输入非数字时会给输入框一个红色边框，但是在firefox和chrome中，你都可以在输入框中输入非数字字符。 您在页面上使用什么文档类型？ 好的，你的浏览器版本可能不支持它？不是 100% 肯定，但老实说，我也会使用一些 js 来验证，目前我不会完全依赖 html5 该属性允许您输入数字但不能提交表单。 仅提交验证！【参考方案3】：快速简单的代码
<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)))" />
【讨论】：
有没有办法限制小数位数，以便将其用于价格？ 它返回一个布尔值，所以我猜您可以添加另一个检查，该检查采用当前值并检查长度是否低于您指定的长度。【参考方案4】：请尝试此代码以及输入字段本身
<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>
它会正常工作的。
【讨论】：
那么如何删除退格呢？【参考方案5】：您可以使用<input type="number" />。这将只允许在其他输入框中输入数字。
示例：http://jsfiddle.net/SPqY3/
请注意，输入 type="number" 标记仅在较新的浏览器中受支持。
对于 Firefox，您可以使用 javascript 验证输入：
http://jsfiddle.net/VmtF5/
2018 年 3 月 12 日更新： 浏览器支持要好得多，现在它受以下支持：
铬 6+ 火狐29+ Opera 10.1+ Safari 5+ 边缘 （Internet Explorer 10+）【讨论】：
它在 chrome 中似乎工作得很好，但在 Firefox 中却不行。 啊。那是因为firefox不支持input type=number。或者，您可以在用户输入文本时使用一些 javascript 来验证输入。答案已更新。 jsfiddle.net/VmtF5 上的 jscript 也不起作用。即使 1 位数字位于字符的开头，验证也会失败。在 jsfiddle 上自己尝试一下 @aarn 它对我有用（见i.imgur.com/AWdmEov.png），你用的是什么浏览器？ @starbeamrainbowlabs 我正在使用 Firefox。另外，输入6abc，它不会显示错误【参考方案6】：<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));
或者你可以用一种复杂但有用的方式来写它：
<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />
注意：跨浏览器和正则表达式。
【讨论】：
您将如何添加输入 .5 或 .3 之类的功能？ 然后你必须考虑第一个和第二个字符（0.43 或.43），这可以通过检查当前输入的值加上按下的键来完成。这在单行代码中会很难看，我建议为此使用一个函数。要测试整数或浮点数，请检查here。
输入错误的号码不能删除【参考方案7】：
我已使用正则表达式将输入值替换为所需的模式。
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">【讨论】：
这就是我喜欢正则表达式的原因。谢谢，伙计，你真的拯救了我的一天【参考方案8】：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 (/^\d+$/.test(str));
<h1>Integer Textbox</h1>
<input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />JSFiddle：https://jsfiddle.net/ug8pvysc/
【讨论】：
当你粘贴一个包含文本的值时，它允许它 它也允许特殊字符。例如：á、ã、ê、ó、è 等。【参考方案9】：<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"
>
享受吧！
【讨论】：
【参考方案10】：我和这个打了一会儿。这里和其他地方的许多解决方案似乎很复杂。此解决方案使用 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 的少量数量，因此输入标签中的 min="1" 和 isNaN() 检查中的 abc = 1。对于仅正数，您可以将这些值更改为 0，甚至只需从输入标签中删除 min="1" 以允许负数。
这也适用于多个盒子（并且可以为您节省一些加载时间而不是通过 id 单独执行它们），只需在需要的地方添加“validateNumber”类。
解释
parseInt() 基本上可以满足您的需求，只是它返回 NaN 而不是某个整数值。使用简单的 if()，您可以在所有返回 NaN 的情况下设置您喜欢的“后备”值:-)。 W3 还声明 here 全局版本的 NaN 将在检查之前进行类型转换，这会提供一些额外的证明（Number.isNaN() 不会这样做）。 发送到服务器/后端的任何值仍应在那里验证！
【讨论】：
【参考方案11】：您可以使用属性 type='number' 的<input> 标签。
例如你可以使用<input type='number' />
此输入字段仅允许数值。 您还可以指定该字段应接受的最小值和最大值。
【讨论】：
【参考方案12】：够简单吗？
inputField.addEventListener('input', function ()
if ((inputField.value/inputField.value) !== 1)
console.log("Please enter a number");
);<input id="inputField" type="text">【讨论】：
鉴于我在这种特殊情况下进行验证的方式，这个解决方案非常有效。 +1【参考方案13】：使用<input type="number"...>怎么样？
http://www.w3schools.com/tags/tag_input.asp
另外，这里是a question that has some examples of using Javascript for validation。
更新：链接到更好的问题（感谢 alexblum）。
【讨论】：
【参考方案14】：我将它用于邮政编码，既快速又简单。
<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]5" required></input>
【讨论】：
【参考方案15】：如果您可以使用 HTML5，您可以使用 <input type="number" />
如果不是，您将不得不通过 javascript 来完成，正如您所说的那样，它不会从代码隐藏中提交。
<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;
P.S 没有测试代码，但如果不检查拼写错误，它应该或多或少是正确的：D 您可能想添加更多内容，例如如果字符串为 null 或为空等该怎么做。 你也可以让这个更快：D
【讨论】：
【参考方案16】：在输入标签内添加：onkeyup="value=value.replace(/[^\d]/g,'')"
【讨论】：
欢迎来到 SO！不幸的是，这是一个 5 1/2 岁的问题，已经有一个公认的答案。您可能想在这里浏览没有答案的问题：***.com/unanswered【参考方案17】：您可以使用以下一行代码：
<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >
它只接受数字。
【讨论】：
我认为这是最简单的方法。无需JS，外观简洁。【参考方案18】：如果不是整数集 0
<input type="text" id="min-value" />
$('#min-value').change(function ()
var checkvalue = $('#min-value').val();
if (checkvalue != parseInt(checkvalue))
$('#min-value').val(0);
);
【讨论】：
【参考方案19】：接受的答案：
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));
会评论原始帖子，但我的声誉太低，无法这样做（刚刚创建了这个帐户）。
【讨论】：
【参考方案20】：请参阅我使用 JavaScript 语言在您的网页上对文本输入元素的值进行跨浏览器过滤的项目：Input Key Filter。您可以将值过滤为整数、浮点数，或编写自定义过滤器，例如电话号码过滤器。看输入整数的代码示例：
<!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>另见我的页面"Integer field:" of the example of the input key filter
【讨论】：
【参考方案21】：我更新了一些发布的答案以添加以下内容：
将该方法添加为扩展方法 只允许输入一个点指定允许小数点后有多少个数字。
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;
;
【讨论】：
【参考方案22】：使用此代码时，您不能在 Mozilla Firefox 中使用“BackSpace Button”，您只能在 Chrome 47 中使用退格键 && event.charCode
【讨论】：
【参考方案23】：http://www.texotela.co.uk/code/jquery/numeric/numeric input 感谢 Leo Vũ 提到这一点，当然还有 TexoTela。带有测试页。
【讨论】：
【参考方案24】：出于一般目的，您可以进行 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)"/>
【讨论】：
【参考方案25】：另一种效果很好的方法。
<input type="text" name="celular" placeholder="Ej. 6756892" maxlength="8" id="telefono" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" >
此修复的优点在于，复制粘贴的值也包含在规则中。
【讨论】：
【参考方案26】：为了接受多个数字（不仅仅是一个数字），最好在 REGEX 条件中添加“+”：
<input type="text" name="your_field" pattern="[0-9]+">
【讨论】：
【参考方案27】：一种方法是拥有一个允许的字符代码数组，然后使用Array.includes 函数查看是否允许输入的字符。
示例：
<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
【讨论】：
【参考方案28】：使用<input type="number">，它只接受数字输入。
尝试使用非数字值提交以下两个表单。
<form>
<!-- some code -->
<input type="number">
<button>SUBMIT</button>
</form>旧版浏览器不支持type=number。所以我们可以用 JavaScript 来验证它：
<form onsubmit=
"if (isNaN(document.getElementById('validatethis').value)) return false;">
<!-- some code -->
<input type="text" id="validatethis">
<button>SUBMIT</button>
</form>【讨论】：
以上是关于如何使 HTML 输入标签只接受数值？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过忽略每次按键上的无效字符来使文本类型的输入元素只接受一个数值（十进制、正数和负数）？
如何使HTML中的输入框使其仅接受IP ADDRESS [重复]