有时需要用户输入的文本中包含或不包含某些字符。
例如,电话号码中不能包含非数值字符。
响应向文本框中插入的字符操作是keypress事件。
因此,可以通过阻止这个事件的默认行为来屏蔽此类字符。
在极端的情况下,可以通过下列代码屏蔽所有按键操作:
运行以上代码后,由于所有案件操作都将被屏蔽,结果会导致文本框变成只读的。
如果只想屏蔽指定的支付,则需要检测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);
}
});
经过最后一点修改,即可确保文本框的行为完全正常了。
在此例的基础上加以修改和调整,即可将同样的技术运用于放过和屏蔽任何输入文本的字符框的字符。