Question

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

Answer 1

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

<input type="number" />

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

同样在mobile和tablets上会显示数字键盘。

See demo

Answer 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>

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

Answer 4

试试这个（利用jquery javascript库）

HTML

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

js（jquery library）

$(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 ot 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/

希望这有帮助

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

Answer 6

是的，你需要一些JavaScript才能做到这一点。我发现JQuery日期选择器小部件非常有用，可以完全满足您的需求。用于实现它的代码是：

html创建文本字段而不允许手动操作：

<input type="text" class="header_input" id="tvpostingdate" placeholder="Posting Date" default='' readonly="readonly">

JS行将选择器绑定到具有我的服务器端进程所期望的特定格式的字段：

$('#tvpostingdate').datepicker({ dateFormat: "mmddyy"});

您可以在此处找到更多信息：http://jqueryui.com/datepicker/

如何限制textarea只保留数字？

6 个答案: