JavaScript键盘输入过滤

Question

有没有一个有效的动态javascript输入过滤器，可以在多个浏览器中限制文本输入？

我在网上看到了多个示例，但大多数似乎存在缺陷或缺乏多浏览器支持。

我目前的尝试如下所示，但在Firefox下，移位数字无法正常工作，而且我还没有尝试其他浏览器。

正如http://www.quirksmode.org/js/keys.html所显示的，这不是一个容易解决的问题。

有没有更好的解决方案？

var numb = /[0-9]/;
var lwr = /[a-z]/;
var upr = /[A-Z]/;
var alpha = /a-zA-Z]/; //not checked
var alphaNum = /a-zA-Z0-9/; //not checked

function onKeyPressAcceptValues(e, reg){
    var key = window.event ? e.keyCode : e.which;
    //permit backspace, tab, delete, arrow buttons, (key == 0 for arrow keys)

    alert(key);
    if(key == 8 || key == 9 || key == 46 ||(key>32 && key <41 ||key == 0)){
        return true;
    }
    var keychar = String.fromCharCode(key);
    return reg.test(keychar);
}

function isNumberKey(parm) {return onKeyPressAcceptValues(parm,numb);}
function isLowerKey(parm) {return onKeyPressAcceptValues(parm,lwr);}
function isUpperKey(parm) {return onKeyPressAcceptValues(parm,upr);}
function isAlphaKey(parm) {return onKeyPressAcceptValues(parm,alpha);}
function isAlphanumKey(parm) {return onKeyPressAcceptValues(parm,alphaNum);} 

它将通过以下方式使用：

<input type="text" name="pw[first_name]" size="15" maxlength="15" onkeypress="return isAlphaKey(event)">

- lief79

---

我还应该提到它不一致地允许其他键通过，例如按下Shift的数字键。我们可能需要进行替换而不是改进。 - lief79

Answer 1

在输入后检查并删除无效值是否可行？

检查charCode和keyCode可能会在不同的浏览器中变得非常困难，为什么不检查实际添加到文本字段中的值呢？

反转您的正则表达式，它们将匹配您不想要的所有内容。 一旦您拥有这个内容，只需使用反转的正则表达式来替换您不想要的输入框中插入的数据。

我在http://jsbin.com/ulibu上创建了一个快速示例，其中包含仅接受整数的文本框。 它有一个小的javascript块，可以从该字段中删除非数字：

function checktext( e ) {
  //Remove digits
  //Yes, the global search/replace is important. If we don't use a global
  //replace ctrl+v will remove only the first invalid character instead of
  //them.
  e.value = e.value.replace( /[^\d]/g , '' );
}

输入框使用keyup事件声明，以捕获任何键入的内容：

<input type="text" id="text" onkeyup="checktext(this);"/>

这确实不完美。您仍需完成以下工作：

1. 进行服务器端验证。客户端验证永远无法捕获所有用户的错误。无论如何，请始终进行服务器端验证。
2. 完善检查。目前使用的是简单的正则表达式，可能会变得更加复杂。
3. 捕捉粘贴事件，以使鼠标粘贴与键盘粘贴被同时转换。
4. 向用户显示一些警告信息，例如“只允许输入 X ”，如果您需要删除文本。否则，他们可能会认为“浏览器出了点问题”。

- coderjoe

Answer 2

拦截键盘事件并不能解决问题，因为用户总是可以使用“编辑 | 粘贴”命令。即使你找到了一种跨浏览器的解决方案来处理这个问题，用户也可以通过禁用JavaScript来绕过所有的限制。

换句话说，不要浪费时间。当用户尝试提交无效数据时，只需给出错误提示即可。

- Josh Stodola

---

在本地快速响应并将一些开销移出可能有价值，但通过正则表达式对已完成的字段进行检查是一种更简单的方法。对于这个应用程序，我需要对JavaScript函数以及服务器端进行数据检查。不幸的是，这意味着重复检查。它可以通过AJAX完成，并在最终发布中使用相同的调用进行检查。现在似乎这是最好的方法。 - lief79

我理解在客户端进行一些基本检查的价值，但这并不意味着你需要在每次按键时都进行检查。当用户提交表单时，进行验证，如果发现错误，则不允许继续提交。简单易行！ - Josh Stodola

Answer 3

以下是一种实现方法：

• 创建一个“伪字段” - 这是用户将看到的输入位置
• 当单击时，将焦点设置为隐藏字段
• 让用户在隐藏字段中输入
• 查看正在输入的内容，并将有效字符复制到伪字段中

用户认为他们正在输入到字段中，但实际上并不是。

- Diodeus - James MacFarlane

---

很有趣，你知道这种方法的任何公共样本吗？ - lief79