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

143

我需要确保某个<input>字段仅将数字作为值。输入的内容不是表单的一部分。因此它不会被提交，因此在提交期间进行验证不是一种选择。我希望用户无法输入数字以外的任何字符。

有没有一种巧妙的方法可以实现这一目标？

html  input  numbers  validating 
— 切尔十布林克
source
— alexblum
2
看一下此[link] [1]，它具有足够的信息。[1]：stackoverflow.com/questions/469357/...
— Maheshkumar
这其中也可能派上用场：stackoverflow.com/questions/995183/...
— Chiel 10 Brinke
— emkey08 '18

Answers:

282

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/

— 病毒帕特尔
source
6
是的，这对我来说都适用于Firefox和Chrome。奇怪的是js对于这么简单的事情是必需的。
— Chiel 10 Brinke
7
在chrome 30中不起作用。在小提琴中，您在“数字”输入中键入字母完全没有问题。嗯...
— 奔
2
如果有人想输入8.9这样的float值怎么办？
— syed shah 2013年
6
要获得更强大的解决方案，还请考虑复制和粘贴可以在此示例中添加字母！
— 尼尔
3
糟糕！第一行必须更改为：var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

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

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

输入验证教程

虽然，如果您的文档类型不是，html那么我认为您需要使用一些javascript / jquery。

— 马丁·卡林87
source
3
尽管在输入非数字时，firefox会在输入框上显示一个红色边框，但是在Firefox和chrome中，您都可以在输入框中输入非数字字符。
— Chiel 10 Brinke 2012
您在页面上使用什么文档类型？
— martincarlin87
好的，也许您所使用的浏览器版本不支持该功能？不是100％肯定，但说实话，我也会使用一些js进行验证，目前我不会完全依赖html5
— martincarlin87 2012年
7
该属性允许您输入数字，但不能提交表单。
— My1
1
仅提交验证！
— 埃里克·霍登斯基
16

快速简便的代码

<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)))" />
— 阿比吉斯·维贾扬
source
13

请尝试将此代码与输入字段一起使用

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

它将正常工作。

— Subindas pm
source
那么如何删除退格键呢？
— 6by3
7

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

示例：http：//jsfiddle.net/SPqY3/

请注意，type="number"只有较新的浏览器才支持输入标签。

对于Firefox，您可以使用javascript验证输入：

http://jsfiddle.net/VmtF5/

更新2018-03-12：浏览器支持现在有了更好的支持，它受到以下支持：

  • 铬6+
  • Firefox 29+
  • Opera 10.1+
  • Safari 5+
  • 边缘
  • （Internet Explorer 10+）
— 星光彩虹弓
source
1
它似乎在chrome中效果很好，但在Firefox中效果不佳。
— Chiel 10 Brinke
啊。这是因为Firefox不支持输入type = number。另外，您可以在用户输入文本时使用一些JavaScript来验证输入。答案已更新。
— starbeamrainbowlabs 2012年
jsfiddle.net/VmtF5上的jscript 也将不起作用。即使字符的开头是1位数字，验证也会失败。自己在jsfiddle上尝试
— Akshay
@aarn它对我有用（请参阅i.imgur.com/AWdmEov.png），您使用的是哪种浏览器？
— starbeamrainbowlabs 2014年
@starbeamrainbowlabs我正在使用Firefox。此外，输入6abc，它不会显示你的错误
— 阿克沙伊
5 
<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" />

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

— 弗雷德里克·高斯
source
您将如何增加输入.5或.3的功能？
— user3591637 2014年
然后，您必须考虑可以通过检查当前输入的值和按下的键来完成的第一个和第二个字符（0.43或.43）。单行代码很难看，我建议为此使用一个函数。要测试整数或浮点数，请在此处检查。
— Fredrick Gauss 2014年
1
您不能删除错误输入的号码
— 克里斯·辛姆
5

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

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">
展开摘要

— 破烂的
source
1
这就是为什么我喜欢正则表达式。谢谢，伙计，你真的救了我的一天
— Nirmal 19'Jul
4 
<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"
>

请享用！

— 用户40521
source
4

我和这个战斗了一段时间。这里和其他地方的许多解决方案似乎都很复杂。该解决方案将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的“ fallback”值：-)。W3还在这里指出，NaN的全局版本将在检查之前进行类型转换，这将提供一些额外的证明（Number.isNaN（）不会这样做）。发送到服务器/后端的任何值仍应在此处进行验证！

— 以赛亚书
source
4 

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/

— Sameh Saeed
source
1
当您粘贴包含文本的值时，它允许它
— Chris Sim
1
它也允许特殊字符。例如：á，ã，ê，ó，è等
— 。– AlmostPitt
3

如果您可以使用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没有测试代码，但如果不检查错别字，它应该或多或少正确：D您可能想添加一些其他信息，例如，如果字符串为null或为空，该怎么办。另外，您也可以加快此操作：D

— czioutas
source
2

如果不是整数，则设置为0

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

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— 网络天空
source
2

接受的答案：

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

会评论原始帖子，但是我的声誉太低（仅创建了此帐户）。

— 克里斯·H
source
2

您可以使用<input>属性类型为“数字” 的标记。

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

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

— 盖斯·查达拉瓦达（Geeth Chadalawada）
source
2

请使用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>
展开摘要

另请参阅我的页面“整数字段：”中的输入键过滤器示例

— 安德烈（Andrej）
source
2

一般而言，您可以进行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)"/>
— 亚西尔·蓬加丹
source
2

我更新了一些答案，添加了以下内容：

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

  • 指定允许小数点后的数字。

    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;
};
— 丛丛
source
1

我将其用于邮政编码，既快捷又简单。

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— 贾斯汀·布斯（Justin Buser）
source
1

使用此代码时，不能在Mozilla Firefox中使用“退格按钮”，而只能在Chrome 47中使用退格&& event.charCode <58;“ pattern =” [0-9] {5}“必填>

— 温德尔·阿尔瓦雷斯
source
0

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

例：

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

很简单？

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
展开摘要

— 诺玛让
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.