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

我需要确保某个

字段只接受数字作为值。 输入不是表单的一部分。因此它不会被提交，所以在提交期间验证不是一个选项。我希望用户不能键入除数字以外的任何字符

有没有一种简洁的方法可以实现这一点？

HTML5 您可以使用仅限制数字条目：

<input type="number" name="someid" />

这只适用于HTML5投诉浏览器。确保html文档的doctype为：

有关旧浏览器中的透明支持，请参见

JavaScript 更新：有一个新的非常简单的解决方案：

它允许您在文本

上使用任何类型的输入过滤器， 包括各种数字过滤器。这将正确处理 复制+粘贴、拖放、键盘快捷键、关联菜单操作、， 不可键入的键和所有键盘布局

亲自去看看或试试

---

对于一般用途，您可以进行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)"/>

函数isNumberKey（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode
如果（字符码>31&（字符码<48 | |字符码>57））
返回false；
返回true；
}

如果要允许小数，请将“如果条件”替换为：

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

if（charCode>31&（charCode！=46&&（charCode<48|charCode>57）））

资料来源：

jsiddle演示：

如何使用

还有，这里是

---

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

您也可以使用html5中的模式属性：

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

尽管如此，如果您的doctype不是

html

，那么我认为您需要使用一些javascript/jquery。

您可以使用

。这将只允许在其他输入框中输入数字

例如：

请注意，输入

type=“number”

标记仅在较新的浏览器中受支持

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

更新2018-03-12:浏览器支持现在好多了，它由以下各项支持：

• 铬6+
• 火狐29+
• 歌剧10.1+
• 狩猎5+
• 边缘
• （Internet Explorer 10+）

---

如果你能使用HTML5，你可以做

如果不是的话，你必须要么通过javascript来完成，就像你说的那样，它不会从codebehind提交来完成

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

函数验证（）{
var返回字符串；
var text=document.getElementByID（'numbersOnly'）.value；
var regex=/[0-9]\./；
var anArray=text.split（“”）；
对于（var i=0；i我使用它来表示邮政编码，快速且简单

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



或者你可以用一种非常有用的方式来写：

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


$（'#最小值'）。更改（函数（）
{   
var checkvalue=$（“#最小值”）.val（）；
if（checkvalue！=parseInt（checkvalue））
$（'最小值'）.val（0）；
});
使用此代码时，您不能在Mozilla Firefox中使用“BackSpace按钮”，只能在Chrome 47&&event.charCode<58；“pattern=“[0-9]{5}中使用BackSpace按钮”"必选>
感谢Leo Vũ提到这一点，当然还有TexoTela。有一个测试页面。
请查看我的项目，该项目使用JavaScript语言对网页上文本输入元素的值进行跨浏览器筛选：。您可以将值筛选为整数、浮点数，或编写自定义筛选器，如电话号码过滤器。请参见输入整数的代码示例：



输入键过滤测试
整型字段
CreateIntFilter（“整数”，函数（事件）{//onChange事件
inputKeyFilter.RemoveMyTooltip（）；
var elementNewInteger=document.getElementById（“NewInteger”）；
var integer=parseInt（此.value）；
if（inputKeyFilter.isNaN（整数，this））{
elementNewInteger.innerHTML=“”；
返回；
}
//elementNewInteger.innerText=integer；//与FireFox不兼容
elementNewInteger.innerHTML=整数；
}
//onblur事件。如果要在输入值为NaN时再次将焦点设置为输入元素，请使用此函数。（空或无效）
，函数（事件）{inputKeyFilter.isNaN（parseInt（this.value），this）；}
);
新整数：

函数AllowOnlyNumber（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==“粘贴”）？剪贴板数据.getData（'Text'）：字符串.fromCharCode（键）；
返回（/^\d+$/.test（str））；
}
整数文本框

享受吧！
我曾与此争论过一段时间。这里和其他地方的许多解决方案似乎都很复杂。此解决方案与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);
    });


$（document）.on（'change'，'.validateEnumber'，function（）{
var abc=parseInt（$（this.val（））；
如果（isNaN（abc））{abc=1；}
$（此）.val（abc）；
});

在我的例子中，我跟踪的是最小值为1的小数量，因此输入标记中的min=“1”和isNaN（）检查中的abc=1。对于纯正数，您可以将这些值更改为0，甚至只需从输入标记中删除min=“1”，以允许使用负数

此外，这也适用于多个框（可以节省一些加载时间，而不是按id逐个加载），只需在需要的地方添加“ValidateEnumber”类即可

解释

parseInt（）基本上满足您的需要，只是它返回的是NaN而不是某个整数值。使用一个简单的if（）可以设置您在所有情况下喜欢的“回退”值，NaN返回：-）。
W3还声明NaN的全局版本将键入cas
<input type="text" id="min-value" />

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

<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

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

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

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

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

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

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

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