JavaScript屏蔽字符的实例详解

发布时间:2019-10-05编辑:脚本学堂
本文分享下,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);
    }
});

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