Javascript 字符限制 - 临时显示无效字符答案

【问题标题】：Javascript character restriction - invalid characters show up temporarilyJavascript 字符限制 - 临时显示无效字符
【发布时间】：2011-12-10 13:13:15
【问题描述】：

我正在使用 Javascript 来限制各种文本输入字段的字符，以作为客户端验证的一种形式以及提高可用性。我正在使用以下代码来执行此操作：

function validNumbers(caller) {
    var exp = /^[\d.]+/g;
    var str = '';
    if (caller.value.match(exp)) {
        str = caller.value.match(exp).toString();
    } else {
        str = '';
    }
    str = str.replace(/\D/g,'');
    caller.value = str;
}

我用 onkeypress="validNumbers(this);" 调用这个函数而且，在大多数情况下，它就像一个魅力。问题是，当我在字段中键入无效字符时，字段的值似乎会更新（从 Javascript 的角度来看），但字符仍然存在，直到我按下下一个键，此时它是视觉上替换为下一个键的值，即使下一个键也是无效的。期望的效果是，当按下无效键时，无效值甚至不会在视觉上显示出来。我该如何做到这一点？

编辑：我选择了下面的答案，因为它让我走上了正确的道路。我确实必须确保将 e.shiftKey 添加到我的排除事件列表中，以防止出现“！@#$%^&*()_+”之类的字符，但这对我来说不是问题我自己。

【问题讨论】：

逐个字符地限制用户输入是一个反可用性特性。告诉用户您在该字段中想要什么（例如“仅数字”或类似的屏幕提示），然后在合理的时间（例如提交表单时）验证它会更有帮助。让他们担心如何实现有效价值。
我将进行服务器端验证，但是通过限制可以放置在文本字段中的字符，我可以节省他们的时间，因为他们无需返回表单以搜索明显的问题，我可以更轻松地为他们处理。如果我只是让他们输入他们想要输入的任何内容，他们就不会立即获得关于哪些有效和哪些无效的反馈，这可能意味着在所有文本字段中搜索一个无效字符。时间问题是这个项目的最大焦点，因为他们有时每天会使用这些表格数百次。
您还有其他选择，例如如果输入了无效字符，则在输入周围放置红色边框。我发现字符输入受到限制并且我不小心输入了无效字符，我按删除将其删除，但聪明的程序员已经这样做了，所以我删除了一个有效字符。我如何找到该错误？另外，如何停止粘贴或拖放无效字符？

标签： javascript validation usability character-replacement

【解决方案1】：

在您的函数中，您将在将值输入文本字段并进行评估后清除该值。相反，您需要阻止它完全输入到文本字段中。为此，您需要使用 keydown 的 preventDefault() 方法：

onkeydown="function(e) { validNumbers(e); }"

function validNumbers(e) {
    if (e.keyCode == 1 || e.keyCode == 2 ... etc) {
        e.preventDefault();
    }
}

这将阻止特定字符 (reference here) 进入输入字段。请注意，这不会阻止复制和粘贴，因此您仍需要评估整个字符串 'onpaste' 或使用类似的事件处理程序阻止 'onpaste'。

这也不是一个跨浏览器的解决方案，但应该让你的脚充分湿透。请参阅此JSFiddle 以获取实时示例。

【讨论】：

我很确定你可以更改："function(e) { validNumbers(e); }" 到 "validNumbers"