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

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

当前回答

var userName = document.querySelector（'#numberField'）; userName.addEventListener（'input'， restrictNumber）; 函数限制数字（e） { var newValue = this.value.replace（new RegExp（/[^\d]/，'ig'）， “”）; this.value = newValue; } <输入类型=“文本” id=“数字字段”>

2020-12-25 18:30:07

其他回答

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

这里有一个简单的例子，它只允许有一个小数，不能再多了。输入事件使用regex替换基于以下两种模式的文本:

删除任何不是数字或点的东西删除点的任何第二个实例

正如下面有人评论的那样，上面的解决方案不处理前导零。如果你的特定用例要求这些是不允许的，你可以像这样添加到上面的模式:

这将允许0.123或。123，但不允许0123或00.123。

2015-03-03 18:05:55

还有一个例子，对我来说很有用:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

也附加到按键事件

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

和HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

下面是一个jsFiddle的例子

2010-05-22 14:39:39

是的，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

Use:

<script>
    function onlyNumber(id){ 
        var DataVal = document.getElementById(id).value;
        document.getElementById(id).value = DataVal.replace(/[^0-9]/g,'');
    }
</script>
<input type="text" id="1" name="1" onChange="onlyNumber(this.id);">

如果你想在按下键后更新一个值，你可以改变onChange为onKeypress, onKeyDown或onKeyup。但是事件onKeypress不会在任何浏览器中运行。

2014-12-22 18:48:41

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

推荐文章

最新文章

标签