如何将文本区域限制为仅保存数字？答案

【问题标题】：How to limit the textarea to only hold numbers?如何将文本区域限制为仅保存数字？
【发布时间】：2014-04-29 14:20:15
【问题描述】：

我正在尝试在我的博客上创建一个日期文本框，而日期只是数字。我不希望任何人在输入字母时出错。有没有办法将字符限制为仅数字？谢谢！

【问题讨论】：

在 html 5 中有一个快速简单的方法 .. 将阻止输入字符而不是数字

【解决方案1】：

改用 HTML5 输入数字类型并利用本机浏览器验证。因此，不需要 JavaScript。

<input type="number" />

它在浏览器中有wide support，这是标准和最佳实践解决方案。

同样在mobile 和tablets 上会出现数字键盘。

See demo

【讨论】：

【解决方案2】：

你需要一些java脚本来实现这个

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

【讨论】：

【解决方案3】：

如果你使用jQuery，你可以像this jsfiddle那样做

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

【讨论】：

【解决方案4】：

试试这个（使用 jquery javascript 库）

html

<input type="text" size="30" />

js（jquery 库）

$(document).ready(function() {
    $("input").attr("placeholder", "Please input numbers").change(function(e) {
      var txt = /[a-z]/gi.test($(this).val());
      if (txt) {
        $(this).val("").attr("placeholder", "Not a number, please input numbers")
      };
    });
})

jsfiddle http://jsfiddle.net/guest271314/v2BRY/

编辑。不确定element 是input 还是textarea，希望两者都适用。

javascript，不使用 jquery javascript 库

html

<input type="text" size="30" />

javascript

function checkText() {   
  var textarea = document.querySelectorAll("input");
  textarea[0].setAttribute("placeholder", "Please input numbers");    
  textarea[0].addEventListener("change", function(e) {
    var txt = /[a-z]/gi.test(e.target.value);
    if (txt) {
      e.target.value = "";
      e.target.setAttribute("placeholder", "Not a number, please input numbers");
    };    
  }, false);
};
checkText()

jsfiddle http://jsfiddle.net/guest271314/pFu4K/

希望对你有帮助

【讨论】：

此答案假设您使用的是 jQuery
@antlersoft 编辑帖子以包括“利用 jquery javascript 库”。 jquery 不需要满足要求，只是分享一个潜在的选择。谢谢。
@antlersoft 请参阅“javascript，不使用 jquery javascript 库”中的帖子编辑选项。只是分享潜在或可能的选择。再次感谢。

【解决方案5】：

您应该使用此函数在各种DOM 元素上设置输入过滤器，包括textarea

function setInputFilter(textbox, inputFilter) {
        ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
            textbox.addEventListener(event, function() {
                if (inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        });
    }

然后您只需设置过滤器，如下所示：

setInputFilter(document.getElementById("textarea_id"), value => {
        return /^\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

【讨论】：

【解决方案6】：

我知道我参加聚会迟到了，但我写在这里是为了提醒自己将来。

html:

<textarea (oninput)="validateValue(event)"></textarea>

JavaScript：

function validateValue(event){
  const elem = event.target;
  const value = elem.value;
  const numVal = value.replace(/\D/,"");
  elem.value = numVal;
}

【讨论】：