javascript - 如何只允许用户在文本框中输入 "-"和 1-9？

Question

如何使用 onkeyup 只允许用户在文本框中输入“-”和 1-9？

Answer 1

使用 jQuery

更新:我看到了其他使用 jQuery 的答案，并假设您有 jQuery。通读下面的注释，然后查看下面的非 jQuery 版本。

此外，我的示例使用 \d，它也允许 0(您的问题明确指出 1-9)。如果您真的想限制 1-9，请将 \d 替换为 1-9。

示例 1

您可以只删除 keyup 上的无效字符。

$('textarea').keyup(function() {
    $(this).val(function(index, oldVal) {
        return oldVal.replace(/[^\d-]/g, '');
    });
});

jsFiddle .

您可能还想绑定(bind)其他事件，例如paste。

例子2

如果暂时显示的 Angular 色让您感到厌烦，您可以使用这个...

$('textarea').keypress(function(event) {
    var keyCode = event.keyCode;
    if ( ! (keyCode >= 48 && keyCode <= 57) && keyCode != 45) {
          event.preventDefault();
    }
});

jsFiddle .

示例 3

如果这太难阅读(使用关键代码)，您可以这样做...

$('textarea').keypress(function(event) {
    if ( ! String.fromCharCode(event.keyCode).match(/[\d-]/)) {
          event.preventDefault();
    }
});

jsFiddle .

此外，当浏览器最终达到规范时，您可以使用 pattern attribute使用 [\d-]+。这将只允许 0-9 和 -。

---

JavaScript

示例 1

var textareas = document.getElementsByTagName('textarea');
for (var i = 0, textareasLength = textareas.length; i < textareasLength; i++) {
    var textarea = textareas[i];
    textarea.onkeyup = function() {
        textarea.value = textarea.value.replace(/[^\d-]/g, '');
    }
}

jsFiddle .

例子2

var textareas = document.getElementsByTagName('textarea');
for (var i = 0, textareasLength = textareas.length; i < textareasLength; i++) {
    var textarea = textareas[i];
    textarea.onkeypress = function(event) {
        var keyCode = event.keyCode || event.which;
        if (!(keyCode >= 48 && keyCode <= 57) && keyCode != 45) {
            event.preventDefault();
        }
    }
}

jsFiddle .

示例 3

var textareas = document.getElementsByTagName('textarea');
for (var i = 0, textareasLength = textareas.length; i < textareasLength; i++) {
    var textarea = textareas[i];
    textarea.onkeypress = function(event) {
        var keyCode = event.keyCode || event.which;
        if (!String.fromCharCode(event.keyCode).match(/[\d-]/)) {
            event.preventDefault();
        }
    }
}

jsFiddle .