HTML文本输入只允许数字输入

有一个快速的方法来设置HTML文本输入(<input type=text />)，只允许数字击键(加上'.')?

当前回答

正则表达式和匹配函数可以很好地处理这种情况。例如，我使用下面的代码来验证图上作为坐标的4个输入框。它运行得相当好。

function validateInput() {
   if (jQuery('#x1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#x2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null || 
       jQuery('#y1').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null ||
       jQuery('#y2').val().toString().match(/^[-]?[0-9]+[\.]?[0-9]*$/) == null) {
         alert("A number must be entered for each coordinate, even if that number is 0. Please try again.");
         location.reload();
   }
}

2013-11-18 15:32:45

其他回答

我用完了这个函数:

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) return false;"

这在IE和Chrome中工作得很好，我不知道为什么它在firefox中也不工作得很好，这个功能在firefox中阻止了tab键。

对于tab键在firefox中工作很好，添加这个:

onkeypress="if(event.which < 48 || event.which > 57 ) if(event.which != 8) if(event.keyCode != 9) return false;"

2019-05-22 15:31:08

一个使用jQuery和replace()而不是查看事件的简短而甜蜜的实现。keyCode或event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

只有一个小的副作用，输入的字母出现暂时和CTRL/CMD + A似乎表现有点奇怪。

2011-05-23 10:41:54

2个解决方案:

使用表单验证器(例如jQuery验证插件)

在输入字段的onblur事件期间(即当用户离开字段时)执行检查，使用正则表达式:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

2009-01-22 14:46:46

jQuery的另一个简单方法:

$('.Numeric').bind('keydown',function(e){
    if (e.which < 48 || e.which > 57)
        return false;
    return true;
})

现在只需将每个输入类设置为Numeric，如下所示:

<input type="text" id="inp2" name="inp2" class='Numeric' />

2012-10-04 05:15:11

是的，HTML5可以。试试下面的代码(w3school):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

2014-08-26 09:09:52

HTML文本输入只允许数字输入

推荐文章

最新文章

标签