听棠.NET

用积极乐观的心态,面对压力
posts - 291, comments - 10629, trackbacks - 112, articles - 5
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理
解决WEB页面上"焦点控制"一法
 这是我以前发表的文章,现在转载过来了。

对于B/S的系统,在页面控制上不如C/S系统那么控制灵活,就如输入的焦点问题,客户都很想通过键盘对数据进行录入,这样的要求我想100个客户中会有90个吧.

因此解决焦点获取问题是必要的.大家可以从网上找到一些方法,不过都比较麻烦,我现在介绍一种很方便的.效果也很不错的方法给大家.

我前段时间看了MS的ASP.NET讲座,在里面谈到了如何让"回车键"使文本框的焦点一个个下移.其中提了三种方法,最好的一种是这样的:

 用客户端脚本在页面添加document的onkeydown事件,让页面在接受到回车事件后,进行Tab键的功能,即只要把event的keyCode由13变为9

 VBScript代码:

 <script language="vbscript">

 sub document_onkeydown

    if event.keyCode=13 then

      event.keyCode=9

   end if

 end sub

</script>

Javascript代码如下:

<script language="javascript" for="document" event="onkeydown">

<!--

  if(event.keyCode==13)

     event.keyCode=9;

-->

</script>

这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

 

因此我对上面的代码进行了一个修改,即判断事件的"源",是否为提交按钮,代码如下:

<script language="javascript" for="document" event="onkeydown">

<!--

  if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')

     event.keyCode=9;

-->

</script>

判断是否为button, 是因为在HTML上会有type="button"

判断是否为submit,是因为HTML上会有type="submit"

判断是否为reset,是因为HTML上的"重置"应该要被执行

判断是否为空,是因为对于HTML上的"<a>链接"也应该被执行,这种情况发生的情况不多,可以使用"tabindex=-1"的方式来取消链接获得焦点.

以上是我个人观点,我是在ASP.NET中进行系统开发的,我会把这个客户端脚本放在"BasePage"中,其他页面都会继承他,从而可以在很多页面进行控制. 如有其他好办法,希望大家讨论.

                                          听棠

                                          2004-5-13

Feedback

#1楼  回复 引用   

2005-03-02 10:41 by 流感之菌
太感谢了

#2楼  回复 引用   

2005-03-02 10:51 by 流感之菌
成功了,太感谢了,但为什么在ie状态栏显示script error 啊??请赐教

#3楼[楼主]  回复 引用 查看   

2005-03-02 10:58 by 听棠.NET      
不会的啊,我用过很多次了,都是没有错误的,你看一下你的错误是什么吧,估计是其他的JS引起的错误,或是你忽略了什么。

#4楼  回复 引用   

2005-03-29 16:40 by mingal[未注册用户]
谢谢!

#5楼  回复 引用   

2005-04-28 15:28 by kima.zhang@toolz.com.hk
我按听棠兄的说法作了一个html表单测试,可是不管用,不知为何,请各位指点。
多谢了!!!


<html>
<head>
<script language="javascript" for="document" event="onkeydown">

<!--

if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')

event.keyCode=9;

-->

</script>


</head>
<body >


<form action="" method=POST name="theForm">
<table>

<tr><td>请输入任意字符测试,完毕之后按ENTER键:<input type=text name=province size=10 onChange="theForm.city.value='恭喜您,成功哪!';">

</td></tr>

<tr><td>测试结果:<input type=text name="city" >
</td></tr>

</table>
</form>

</body></html>

#6楼[楼主]  回复 引用 查看   

2005-04-28 15:42 by 听棠.NET      
老兄,我执行你提供的页面,成功的啊。好好的啊。

#7楼  回复 引用   

2005-04-29 14:08 by kima.zhang@toolz.com.hk
多谢棠哥的支持!!!
我明白原来是我用的编辑工具设置有问题。我为这问题已困好久了,这个功能对我非常重要,作不了真要命!
以后作个朋友吧,虽然我开发了多年系统,但我的.net才开始,可是热炒热买就要作公司数据库商务型网站,需要同行们支持,谢了!
有QQ吗?我的是:460237837。

#8楼[楼主]  回复 引用 查看   

2005-05-01 16:43 by 听棠.NET      
@kima.zhang@toolz.com.hk :
我的QQ很少用的,一般是用MSN:tintown_liu@hotmail.com

#9楼  回复 引用   

2005-05-05 14:06 by kima.zhang@toolz.com.hk
我想在表单的文本框中填入客户代号,然后一回车,这个客户资料便显示到其它的表格中(客户资料已存在MYSQL数据库中)。我现在看到的方法是在开启这个页面时,把相关的信息取出来放到一个文本文件中,然后再对这个文件进行读取和显示操作。但我不认为这个方法不是最好的,应如同VB、PB等数据库开发工具那样,随时都可从数据库中取到即时信息,动态地的读取和显示。这样作应有很多好处,请各位指点!
谢谢了!!!

#10楼  回复 引用   

2005-06-16 15:21 by Kevin@good.cn
假如一个注册页面 前面的必填项目已经填好,后面还有N个选填的呢

#11楼  回复 引用   

2005-08-05 20:22 by gooon[未注册用户]
谢谢

#12楼  回复 引用   

2005-08-13 16:30 by 流云归处[未注册用户]
你做的东西很棒!解决了大问题!
但我还有个问题请教你
如果是含有多个<select ...></select>表单,为什么会间隔跳过,请大侠帮帮想办法,感谢了先!

#13楼  回复 引用   

2005-08-26 16:12 by 罗[未注册用户]
我自己折腾了一下午。才搞定。
搞定了上网一查。有现成的————你的代码。。。
结果发现自己还是漏了连接的情况。。。。网络真好使啊。

#14楼  回复 引用   

2005-09-22 21:35 by myhope88[未注册用户]
为什么要按两次回车键才可以提交呢,可以只让它一次按回车键就可以触发按钮的click事件呢?我是人新手,请各位帮帮忙,先感谢了!

#15楼  回复 引用   

2005-12-09 17:18 by asp.net[未注册用户]
在asp.net中行吗?怎么我试了好多次都不行啊?

#16楼  回复 引用   

2005-12-23 15:30 by ccbwd[未注册用户]
如何设置一文本录满后自动转到下一个文本框?

#17楼  回复 引用   

2006-05-23 11:39 by liyun[未注册用户]
哦,多谢了,我已经使用成功了!

#18楼  回复 引用   

2006-06-14 14:19 by yeyarong[未注册用户]
我在asp.net2.0试过,需要按回车两次才能执行。

#19楼  回复 引用   

2006-07-24 11:28 by wang[未注册用户]
我是初学者,对你的方法很感兴趣,试了一下,但不成功,
用web方式下的VB.NET ,能不能详细介绍一下,非常感谢!!!!

#20楼  回复 引用   

2006-07-27 15:01 by gotoxue[未注册用户]
如果不按回车,比如我要求每输入4个字符焦点就自动跳转下一textbox,这个程序如何做?谢谢

#21楼  回复 引用   

2006-09-21 18:18 by wwlhz[未注册用户]
Good
Thanks

#22楼  回复 引用   

2006-10-11 14:35 by baohua[未注册用户]
怎么要按两次才能提交啊。可不可以按一次就可以提交的啊

#23楼  回复 引用   

2006-11-14 11:35 by young[匿名][未注册用户]
在VB.NET中通过,只要将代码贴到HTML中就可以了。
谢谢!

#24楼  回复 引用   

2007-08-04 17:02 by lsl[未注册用户]
对于ImageButton呢?这个办法对于页面上广泛使用ImageButton的好像没有效果……