您当前的位置:首页 > 网站建设笔记 >

javascript过滤输入屏蔽特定字符

0

过滤输入

我们经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据。例如,必须包含某些字符,或者必须匹配某种模式。由于文本框在默认情况下没有提供多少验证数据的手段,因此必须使用JavaScript来完成此类过滤输入的操作。而综合运用事件和DOM手段,就可以将普通的文本框转换成能够理解用户输入数据的功能型控件。

1.屏蔽字符

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

<script type="text/javascript">
ADS.addEvent(document.getElementById("inp1"),"keypress",function(eventObject){
	ADS.preventDefault(eventObject);
});
</script>

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

<script type="text/javascript">
ADS.addEvent(document.getElementById("inp2"),"keypress",function(eventObject){
	eventObject=ADS.getEventObject(eventObject);
	var target=ADS.getTarget(eventObject);
	var charCode=ADS.getCharCode(eventObject);
	if(!/\d/.test(String.fromCharCode(charCode))){
		ADS.preventDefault(eventObject);
	}
});
</script>

在这个例子中,我们使用ADS.getCharCode()实现了跨浏览器取得字符编码。然后,使用String.fromCharCode()将字符编码转换成字符串,再使用正则表达式/\d/来测试该字符串,从而确定用户输入的是不是数值。如果测试失败,那么就使用ADS.preventDefault()屏蔽按键事件。结果,文本框就会忽略所有输入的非数值。虽然理论上只应该在用户按下字符键时才触发keypress事件,但有些浏览器也会对其他键触发此事件。Firefox和Safari(3.1版本以前)会对向上键、向下键、退格键和删除键触发keypress事件,Safari 3.1及更新版本则不会对这些键触发keypress事件。这意味着,仅考虑到屏蔽不是数值的字符还不够,还要避免屏蔽这些极为常用和必要的键。所幸的是,要检测这些键并不困难。在Firefox中,所有由非字符键触发的keypress事件对应的字符编码为0,而在Safari 3以前的版本中,对应的字符编码全部为8。为了让代码更通用,只要不屏蔽那些字符编码小于10的键即可。故而,可以将上面的函数重写成如下所示。

<script type="text/javascript">
ADS.addEvent(document.getElementById("inp3"),"keypress",function(eventObject){
	eventObject=ADS.getEventObject(eventObject);
	var target=ADS.getTarget(eventObject);
	var charCode=ADS.getCharCode(eventObject);
	if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
		ADS.preventDefault(eventObject);
	}
});
</script>

这样,我们的事件处理程序就可以适用所有浏览器了,即可以屏蔽非数值字符,但不屏蔽那些也会触发keypress事件的基本按键。除此之外,还有一个问题需要处理:复制、粘贴及其他操作还要用到Ctrl键。在除IE之外的所有浏览器中,前面的代码也会屏蔽Ctrl+C、Ctrl+V,以及其他使用Ctrl的组合键。因此,最后还要添加一个检测条件,以确保用户没有按下Ctrl键,如下面的例子所示。

<script type="text/javascript">
ADS.addEvent(document.getElementById("inp4"),"keypress",function(eventObject){
	eventObject=ADS.getEventObject(eventObject);
	var target=ADS.getTarget(eventObject);
	var charCode=ADS.getCharCode(eventObject);
	if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !eventObject.ctrlKey){
		ADS.preventDefault(eventObject);
	}
});
</script>

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

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部