用简便快速的JavaScript来限制键盘输入

ZDNet软件频道 时间:2002-09-26 作者:BUILDER.COM |  我要评论()
本文关键词:
终端用户有时在向一个区域输入了一些不恰当的数据(例如在一个数字文本对象中输入字符数据),直到他们提交表格时才发现这个问题,通过限制键盘输入,你就可以防止这种类似的问题。
终端用户有时在向一个区域输入了一些不恰当的数据(例如在一个数字文本对象中输入字符数据),直到他们提交表格时才发现这个问题,这会让他们非常沮丧的。但是通过限制键盘输入,你就可以防止这种类似的问题。这里有一个简单的JavaScript,它可以告诉使用者什么时候出现了数据类型的错误。

代码

我决定将限制键盘输入的任务分为两个部分。第一部分定义了有效的输入,而第二部分对照着有效输入的列表来核对键盘输入,如果输入是无效的,第二部分将会给出一个错误信息。

我决定使用一个名为keybEdit的JavaScript类来处理定义有效键盘输入的任务,这样的决定是有很多原因的。这个类的一个实例可以包括有效字符和错误信息。此外,这个类允许我可以为每几个类型的输入定义一个实例。例如,一个keybEdit类的数字实例可以允许从0到9的数字,字母实例将只允许从a到z,而一个字符数字实例则可以允许字母和数字的输入。选项错误信息会向用户给出所要求的输入类型的信息。


样本窗体
点击这里来获得JavaScript的HTML窗体样本的代码。


列表A给出了一个限定输入的合理的出发点,但你没有理由就停在这里。KeybDecimal允许在数字中输入小数点,keybDate允许在数字中输入斜线。当然这些例子并不是板上钉钉的,例如,如果在一个数字文本对象中不要求错误信息,只需要将keybNumeric改为var keybNumeric = new keybEdit('01234567890');你可以根据自己的目的来控制keyEdit类。

一旦所要求的keybEdit类的实例被创建,就是要进行下一步的时候了。下一步由JavaScript 的 editKeyBoard 函数来处理。EditKeyBoard函数的目的就是将当前按下的键与keybEdit类之中的有效键入的列表进行比较。如果此键在列表中出现,则不采取行动且输入会显示在文本对象之中。然而,如果列表之中没有这个键,来自keybEdit的错误信息将被显示出来且此事件被取消,结果就是你的键入并不在文本对象之中出现。剩下的事情就只是给文本对象设置一个事件处理器。

事件处理器

编写基于浏览器的应用软件的最大优点之一就是你可以在页面上对不同的对象使用客户端事件处理器。但这也会成为编写应用软件的一个问题。由于大量不同的事件处理器有时候会无法对付。例如,对于限制对文本元素的键盘输入有三种可能的事件处理器可用:onKeyDown, onKeyUp和onKeyPress,我们该用哪一个呢?我倾向于使用onKeyPress事件处理器,这是由于它将[Control]C返回为control-c,而不是分开的control和c。onKeyPress事件处理器还可以忽略一些例如[Tab], [Delete]和[Caps Lock]的键。

让我们以一个名为txtCurrentDate的HTML文本框来开始:

<INPUT type=text name=txtCurrentDate style="TEXT-ALIGN: right" onkeypress="editKeyBoard(this,keybNumeric)">

按下一个无效的键将会产生如图A中显示的信息,而有效键的输入则会被接受且不会出现错误信息。

图 A

点击放大

错误信息对话框

只要txtCurrentDate是一个HTML文本框,这个例子就会正常地工作。如果txtCurrentDate是一个Active Server Page (ASP)开发之中的Design Time Control (DTC)的话,则情况会稍有不同。DTC在处理服务器端事务时会很简单,但是在客户机端,执行情况却并不清晰,这是由于事件处理必须被设置在页面加载中。

要设置onKeyPress事件处理器,在HTML主体标签中加入下面的代码:

<body onLoad=”document.all.txtTopCustomers.onkeypress = new Function('editKeyBoard(this,keybNumeric)')”>

这与上面的代码片段有着相同的结果,但它与DTC或HTML文本框都可以工作。

总结

通过对用户输入内容进行限制,就可以减少非法输入所带来的麻烦,这也有助于保护数据的完整性。


本文为ZDNet China版权所有,未经许可严禁转载。

责任编辑:炒饭

欢迎评论或投稿


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134