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)">

Answer 1

陷阱键盘事件无论如何都不会起作用，因为用户总是可以使用Edit |糊。即使您确实提出了跨浏览器解决方案来解决这个问题，用户也可以通过禁用Javascript来绕过所有内容。

换句话说，不要浪费你的时间。只是在用户尝试提交无效数据时给出错误。

Answer 2

输入工作后会检查和删除无效值吗？

检查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);"/>

这肯定不完美。你还需要做的事情：

验证服务器端。客户端验证永远不会捕获所有用户的错误。无论如何总是验证服务器端。
完善支票。这是一个简单的正则表达式，有些可能最终会变得更复杂
捕获粘贴事件，以便以相同的方式转换鼠标粘贴事件。
如果您必须删除文本，则向用户显示“仅允许X”的警告。否则他们可能会认为“浏览器表现得很有趣”。

Answer 3

这是一种方法：

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

用户认为他们正在输入字段，但他们不是。

Javascript键盘输入过滤

3 个答案: