首页 » JavaScript » 屏蔽字符

屏蔽字符

有时候,我们需要用户输入的文本中包含或不包含某些字符。例如,电话号码中不能包含非数值字符。如前所述,响应向文本框中插入的字符操作是keypress事件。因此,可以通过阻止这个事件的默认行为来屏蔽此类字符。在极端的情况下,可以通过下列代码屏蔽所有按键操作:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    getCharCode: function (event) {
        if (typeof event.charCode == "number") {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "keypress", function (event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

运行以上代码后,由于所有案件操作都将被屏蔽,结果会导致文本框变成只读的。如果只想屏蔽指定的支付,则需要检测keypress事件对应的字符编码,然后在决定如何相应。例如,下列代码只允许用户输入数值:

EventUtil.addHandler(textbox, "keypress", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);

    if (!/\d/.test(String.fromCharCode(charCode))) {
        EventUtil.preventDefault(event);
    }
});

在这个例子中,我们使用EventUtil.getCharCode()实现了跨浏览器取得字符编码。然后,使用string.fromCharCode()将字符编码转换成字符串,再使用正则表达式/\d/来测试该字符串,从而确定用户输入的不是数值。如果测试失败,那么就使用EventUtil.preventDefault()屏蔽按键事件。结果,文本框就会忽略所有输入的非数值。

虽然理论上值应该在用户按下字符键时才触发keypress事件,但有些浏览器也会对其它按键触发次事件。Firefox和Safari(3.1版本以前)会对向上键、向下键、退格键和删除键触发keypress事件;Safari3.1及更新版本则不会对这些键触发keypress事件。这意味着,仅考虑屏蔽不是数值的字符还不够,还要避免屏蔽这些极为常用和必要的键。所幸的是,要检测这些键并不困难。在Firefox中,所有由非字符键触发的keypress事件对应的字符编码为0,而在Sarai3.1以前的版本中,对应的字符编码全部为8。为了让代码更通用,只要不屏蔽那些字符编码小于10的键即可。故而,可以将上面的函数重写成如下所示:

EventUtil.addHandler(textbox, "keypress", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);

    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) {
        EventUtil.preventDefault(event);
    }
});

这样,我们的事件处理程序就可以是适用所有浏览器了,即可以屏蔽非数值字符,但不屏蔽那些会触发keypress事件基本按键。

除此之外,还有一个问题需要处理:复制、粘贴及其它操作还要用到Ctrl键。在除了IE之外的所有浏览器中,前面的代码也会屏蔽Ctrl+C、Ctrl+V,以及其它使用Ctrl的组合键。因此,最后还要添加一个检测条件,以确保用户没有按下Ctrl键,如下面的例子所示:

EventUtil.addHandler(textbox, "keypress", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);

    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {
        EventUtil.preventDefault(event);
    }
});

经过最后一点修改,就可以确保文本框的行为完全正常了。在这个例子的基础上加以修改和调整就可以将同样的技术运用于放过和屏蔽任何输入文本的字符框的字符。

此文章发表在 JavaScript 标签为 . 将固定链接加入收藏.