如何使 HTML 输入标签只接受数值？

小开

最佳答案

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 : 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 文本输入只允许数字输入

JSFiddle 演示: http://jsfiddle.net/viralpatel/nSjy7/

小开

使用 <input type="number"...>怎么样？

Http://www.w3schools.com/tags/tag_input.asp

还有，这是这个问题有一些使用 Javascript 进行验证的例子。

更新: 链接到更好的问题(感谢 alexblum)。

小开

您还可以在 html5中使用 pattern 属性:

<input type="text" name="name" pattern="[0-9]" title="Title" />

输入验证教程

不过，如果 doctype 不是 html，那么我认为您需要使用一些 javascript/jquery。

小开

您可以使用 <input type="number" />。这将只允许数字输入到其他输入框。

例子: http://jsfiddle.net/SPqY3/

请注意，输入 type="number"标记只在较新的浏览器中受支持。

对于 firefox，您可以使用 javascript 验证输入:

Http://jsfiddle.net/vmtf5/

更新2018-03-12: 浏览器支持更好了，现在支持以下内容:

Chrome 6 +
火狐29 +
Opera 10.1 +
Safari 5 +
Edge
(Internet Explorer 10 +)

小开

如果你可以使用 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;
}

PS 没有测试代码，但是如果没有检查拼写错误，那么它应该或多或少是正确的您可能需要添加一些其他的东西，比如如果字符串为 null 或空，那么应该怎么做等等。你也可以做得更快: D

小开

我用这个做邮政编码，又快又简单。

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

小开

<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" />

注意 : 文字中的跨浏览器和正则表达式。

小开

如果不是整数集0

<input type="text" id="min-value" />


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

小开

当使用这段代码时，你不能在 Mozilla Firefox 中使用“ BackSpace 按钮”，你只能在 Chrome 47 & & event.charCode < 58; “ pattern =”[0-9]{5}”要求 > 中使用 BackSpace

小开

利奥五世(leov)在 http://www.TexoTela.co.uk/code/jquery/numeric/中提到了这一点，当然还有 TexoTela。

小开

请参阅我的项目的跨浏览器过滤器的价值的文本输入元素在您的网页使用 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>

也请参阅我的页面 “整数字段:”的输入键过滤器的例子

小开

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);" />

https://jsfiddle.net/ug8pvysc/

小开

<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"
>

好好享受吧！

小开

我和这家伙吵了一会儿。这里和其他地方的许多解决方案似乎都很复杂。这个解决方案在 HTML 旁边使用 JQuery/javascript。

    <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还声明给你，NaN 的全局版本在检查之前将输入 cast，这将提供一些额外的验证(Number.isNaN ()不这样做)。发送到服务器/后端的任何值仍然应该在那里进行验证！

小开

公认的答案是:

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));
}

会评论原来的帖子，但我的声誉太低，这样做(刚刚创建了这个帐户)。

小开

可以使用带有属性 type = ‘ number’的 <input>标记。

例如，您可以使用 <input type='number' />

此输入字段只允许数值。还可以指定此字段应接受的最小值和最大值。

小开

为了接受多个数字(而不仅仅是一个数字) ，最好在 REGEX 条件中加上“ +”:

<input type="text" name="your_field" pattern="[0-9]+">

小开

请在输入字段本身的同时尝试这段代码

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

一切都会好起来的。

小开

作为一般用途，您可以按照以下方式进行 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)"/>

小开

在您的输入标记中添加: onkeyup = “ value = value.place (/[ ^ d ]/g,”)”

小开

我使用正则表达式将输入值替换为所需的模式。

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">

小开

我更新了一些贴出的答案，添加了以下内容:

将该方法作为扩展方法添加
只允许输入一个点

指定允许小数点后面有多少个数字。

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;
};

小开

快速简易代码

<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)))" />

小开

一种方法是使用一个允许字符代码的数组，然后使用 Array.includes函数查看是否允许输入字符。

例如:

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

小开

够简单吗？

inputField.addEventListener('input', function () {
if ((inputField.value/inputField.value) !== 1) {
console.log("Please enter a number");
}
});

<input id="inputField" type="text">

小开

这是另一个非常有效的方法。

<input type="text" name="celular" placeholder="Ej. 6756892" maxlength="8" id="telefono"   oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" >

这个修复的好处是，复制粘贴的值也包含在规则中。

小开

使用 <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>

小开

您可以使用以下一行代码:

<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

它只接受数字。

小开

你可以用一行

<input onkeypress="return /[0-9]/i.test(event.key)" >

小开

接受的答案已经很好了，但是如果你的要求是你希望你的用户能够导航他们的输入(通过使用左或右光标键) ，并可能修改他们的输入(通过使用键盘上的删除键或退格键) ，你可以选择使用这种方法。

此方法的另一个好处是，除了接受数字键盘上的数字外，还可以接受键盘上行的数字。

Input HTML 元素看起来像这样..。

<input type="number"
onkeydown="return validateIsNumericInput(event)"
...
any other attributes for the input element
>

JavaScript 函数如下所示:

/**
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) || (ASCIICode >= 96 && ASCIICode <= 105)) {
return true;
};
if (permittedKeys.includes(ASCIICode)) {
return true;
};
return false;
}

小开

根据我的理解，您希望在文本输入框中只允许数值。作为一个初学者，我也很难理解这个逻辑。这个问题可以在 ES6中简单地解决。下面是我想到的最简单的解决方案:

function test(){
for (var i = 0; i < document.getElementById("element").value.length; i++) {
if (isNaN(document.getElementById("element").value[i])){
document.getElementById("element").value = '';
console.log(document.getElementById("element").value[i])
}
};
}

请注意，此代码不适用于浮点数！