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

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

当前回答

希望我不是用一个丑陋的棍子在这里打死马，但我用这个为我的网站数量输入，它只允许从1到99的数字。

试一试: https://jsfiddle.net/83va5sb9/

      <input min="1" type="text" id="quantity" name="quantity" value="1"
      onKeyUp="numbersonly()">

      <script>
    function numbersonly() {
      var str = document.getElementById("quantity").value
      var newstr = ""
      for (i = 0; i < str.length; i++) {
        for (ii = 1; ii < 10; ii++) {
          if (str.charAt(i).indexOf(ii) > -1) {
            newstr += str.charAt(i)
          }
        }
      }
      if (newstr == "") {
        newstr = 1
      }
      if (parseInt(newstr) > 99) {
        newstr = 99
      }
      document.getElementById("quantity").value = newstr
    }

    </script>

2017-01-28 03:06:45

其他回答

上面的一些答案使用了过时的内容，比如which的使用。

要检查按下的键是否为数字，可以使用keyup eventListener来读取event.key的值。如果不是数字，就不要输入字符。您可以将其他密钥加入白名单。例如，允许用户使用箭头在输入字段中向后或向前导航，或者按退格键并删除输入的数字。

validate (event) {
  const isNumber = isFinite(event.key)
  const whitelist = ['Backspace','Delete','ArrowDown','ArrowUp','ArrowRight','ArrowLeft']
  const whitelistKey = whitelist.includes(event.key)

  if (!isNumber && !whitelistKey) {
    event.preventDefault()
  }
}

2021-05-12 10:00:01

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

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

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

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

2015-03-03 18:05:55

这可以立即删除任何坏字符，只允许一个点，是短的，并允许退格等:

$('.numberInput').keyup(function () {
    s=$(this).val();
    if (!/^\d*\.?\d*$/.test(s)) $(this).val(s.substr(0,s.length-1));
});

2012-10-18 18:07:00

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

只是使用jQuery的另一个变体

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

2012-02-23 17:21:15

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

推荐文章

最新文章

标签