Javascript限制文本输入字符答案

【问题标题】：Javascript limit text input charactersJavascript限制文本输入字符
【发布时间】：2011-07-28 21:46:12
【问题描述】：

我想将文本框的输入字符限制为[a-z0-9_-]。但是，无论何时执行此操作，例如退格键和箭头键都不起作用。我在这个网站和其他网站上发现了一些尝试，但它们要么不能在所有浏览器上正常工作，要么使用黑名单。例如W3Schools website example 黑名单号码。有没有办法使用白名单（上面的那个）并且仍然允许退格、箭头、主页、结束等键？还是我必须添加与我想要允许的键匹配的每个键码？我做了这样的事情（为了简单起见，这被缩短了）。

编辑 - 添加代码

 <input type="text" onkeypress="return checkInput();">
    function checkInput(){
        return /[a-z0-9_-]/gi.test(String.fromCharCode(window.event.keyCode));
    }

【问题讨论】：

-1 因为您将 w3schools 与 w3c 站点混淆了。如果您更正答案，我保证会删除 -1（我知道我可以对其进行编辑，但是您可能无法理解 why。
我知道 w3c 学校不是最好的，但它是我能找到的最好的例子
@Timothy Ruhle，w3schools 与 W3C 没有任何关系。请多阅读 w3fools。
-1 因为没有阅读 zzzBov 的第一条评论。如果您更正答案，将删除它。
那么请按save让我们看到！

标签： javascript dom-events whitelist onkeypress

【解决方案1】：

只需将示例中的正则表达式更改为如下所示：

numcheck = /[^a-z0-9_-]/;

或者更好的是，避免双重否定：

numcheck = /[a-z0-9_-]/;
return numcheck.test(keychar);

然后你可以查找退格等键码并检查它们：

if (keychar === 8) return true;
...

或者甚至将它们放入您的正则表达式中：

numcheck = /[a-z0-9_\x08-]/;

【讨论】：

还是不行。将其更改为 !/[^a-z0-9_-].test() 不起作用。
我在我的代码中做了......我不知道我可以在你的例子中做类似最后一行代码的事情。适合我不阅读 MDC 上关于 RegExp 的整个页面。

【解决方案2】：

您尚未提供任何代码示例，因此很难在响应中具体说明，但作为一般策略，请尝试以下操作：不要尝试将在输入时可以输入的字符列入白名单，而是验证每次击键后文本框的内容，以确保它仍然包含有效字符。如果不是，请删除最后输入的字符。

这种方法将允许使用退格键等特殊键，同时实现您真正想要的效果：文本框中的有效值。

【讨论】：

但是输入中间字符或者复制/粘贴呢？

【解决方案3】：

是的，您可以限制字符的输入。例如，创建一个检查正在发生的事情的函数，如果一切正常则返回 true，否则返回 false：

// return true for 1234567890A-Za-z - _
function InputCheck(e) {
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        if (e.which == 45 || e.which == 95 || (e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122))
            return true;
        return false;
    }
    return true;
}

一旦你有了这个函数，就把它挂到你的输入中（这是用 jQuery）：

$('#InputID').keypress(InputCheck);

您可以根据需要进行复杂的检查，例如这将允许美元货币价值：

function InputCheck(e) {
    if ((e.shiftKey && e.keyCode == 45) || e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 36) {
        return false;
    }
    // . = 46
    // $ = 36
    var text = $(this).val();

    // Dollar sign first char only
    if (e.which == 36 && text.length != 0) {
        return false;
    }

    // Only one decimal point
    if (e.which == 46 && text.indexOf('.') != -1) {
        return false;
    }

    // Only 2 numbers after decimal
    if (text.indexOf('.') != -1 && (text.length - text.indexOf('.')) > 2) {
        return false;
    }

    return true;
}

【讨论】：

【解决方案4】：

你可以按你喜欢的任何键，只要你不让 value 包含任何东西不在白名单中。

inputelement.onkeyup=function(e){
  e=e || window.event;
  var who=e.target || e.srcElement;
  who.value= who.value.replace(/[^\w-]+/g,'');
}

【讨论】：

【解决方案5】：

将此代码添加到 onkeypress 事件。

    var code;
    document.all ? code = e.keyCode : code = e.which;
    return ((code > 64 && code < 91) || (code > 96 && code < 123) || code == 8 || code == 32 || (code >= 48 && code <= 57));

为了浏览器的兼容性，您可以添加 var k = e.keyCode == 0 ? e.charCode : e.keyCode;

【讨论】：