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

Question

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

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

score 317 · Accepted Answer

HTML 5

您可以使用HTML5 输入类型 number来限制仅数字条目：

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

score 45 · Accepted Answer

也可以在 html5 中使用 pattern 属性：

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

输入验证教程

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

score 29 · Accepted Answer

快速简单的代码

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

score 17 · Accepted Answer

请尝试此代码以及输入字段本身

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

它会正常工作。

score 10 · Accepted Answer

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

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

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

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

http://jsfiddle.net/VmtF5/

2018 年 3 月 12 日更新：浏览器支持现在好多了，它受以下支持：

铬 6+
火狐 29+
歌剧 10.1+
野生动物园 5+
边缘
（Internet Explorer 10+）

score 7 · Accepted Answer

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

注意：跨浏览器和正则表达式。

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

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/

score 5 · Accepted Answer

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

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

它只接受数字。

score 4 · Accepted Answer

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

享受！

score 4 · Accepted Answer

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

score 4 · Accepted Answer

够简单吗？

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

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

score 4 · Accepted Answer

您可以使用<input>属性 type='number' 的标签。

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

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

score 3 · Accepted Answer

如果您可以使用 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您可能想添加更多的东西，例如如果字符串为空或空等时该怎么办。您也可以更快：D

score 3 · Accepted Answer

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

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

此外，这里有一个问题，其中有一些使用 Javascript 进行验证的示例。

更新：链接到更好的问题（感谢 alexblum）。

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

接受的答案：

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

会评论原始帖子，但我的声誉太低而不能这样做（刚刚创建了这个帐户）。

score 3 · Accepted Answer

3

在输入标签内添加： onkeyup="value=value.replace(/[^\d]/g,'')"

于 2018-07-05T04:25:42.633 回答

score 2 · Accepted Answer

如果不是整数，则设置 0

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

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

score 2 · Accepted Answer

我更新了一些发布的答案以添加以下内容：

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

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

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

score 2 · Accepted Answer

请参阅我使用 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>

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

score 1 · Accepted Answer

使用此代码时，您不能在 Mozilla Firefox 中使用“BackSpace Button”，您只能在 Chrome 47 中使用退格键 && event.charCode < 58;" pattern="[0-9]{5}" required>

score 1 · Accepted Answer

http://www.texotela.co.uk/code/jquery/numeric/ 数字输入归功于 Leo Vũ 提到这一点，当然还有 TexoTela。带有测试页。

score 1 · Accepted Answer

另一种效果很好的方法。

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

此修复程序的优点是复制粘贴的值也包含在规则中。

score 1 · Accepted Answer

出于一般目的，您可以进行 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)"/>

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

例子：

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

score 0 · Accepted Answer

0

一根线就可以使用

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

于 2022-01-17T12:17:32.117 回答

score 0 · Accepted Answer

最好将“+”添加到 REGEX 条件以接受多个数字（不仅仅是一个数字）：

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

score 0 · Accepted Answer

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

这种方法的另一个好处是，除了来自数字小键盘的数字之外，它还接受来自键盘顶行的数字。

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

score 0 · Accepted Answer

据我了解，您只想在文本输入框中允许数值。由于我是初学者，我也为这种逻辑而苦苦挣扎。这个问题可以在 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])
        }
    };
}

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

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

31 回答 31

HTML 5

JavaScript

Related

Reference