解决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"中,其他页面都会继承他,从而可以在很多页面进行控制. 如有其他好办法,希望大家讨论.
解决WEB页面上"焦点控制"一法的更多相关文章
- Web页面上的控件
Web页面,即:.aspx文件页面的根目录下,分为了5部分 [0]-{System.Web.UI.LiteralControl} [1]-{System.Web.UI.HtmlControls.Htm ...
- HTML5 File接口(在web页面上使用文件)
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的Data ...
- 使用python在WEB页面上生成EXCEL文件
来自:http://blog.sina.com.cn/s/blog_5d18f85f0101bxo7.html 近日写的一个程序需要在WEB服务器上生成EXCEL文件供用户下载,研究了一下找到了以下比 ...
- 用overflow-y 解决web页面抖动问题
页面抖动(左右抖动)让人视觉上很不爽.. /** original : php攻城师 http://blog.csdn.net/phpgcs **/ 最开始我也以为是 layout 不一致的原因..后 ...
- 解决Web Uploader上传文件和图片 延迟和not defined
1.出现list not define时,var $list = $("#fileList"); 2.选择文件框有延迟,可能是因为选择文件类型过多 mimeTypes: 'imag ...
- web页面上传大文件有没有好的解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
- web页面上展示图片时,图片不显示,报错:ERR_CONTENT_LENGTH_MISMATCH
问题描述 前端页面加载css,和js文件的时候,经常出现ERR_CONTENT_LENGTH_MISMATCH的报错情况. 查找问题 在单独打开hearder中css,js的网络地址是能打开的 ...
- 移动端web页面上滑加载更多功能
背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...
- 获取用户在web页面上选中的文本
window.getSelection().toString();
随机推荐
- Json之语法,格式
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同.由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 Jav ...
- javascript之Date
JSON 日期转 JS日期,我们知道,日期类型转成JSON之后,返回的数据类似这样: /Date(1379944571737)/ 但是这种日期并不能直接显示,因为根本没有人知道这是什么意思,下面提供一 ...
- 认识元数据和IL(中)<第四篇>
书接上回[第二十四回:认识元数据和IL(上)],我们对PE文件.程序集.托管模块,这些概念与元数据.IL的关系进行了必要的铺垫,同时顺便熟悉了以ILDASM工具进行反编译的基本方法认知,下面是时候来了 ...
- python每次处理一个字符的三种方法
python每次处理一个字符的三种方法 a_string = "abccdea" print 'the first' for c in a_string: print ord(c) ...
- PL/SQL --> 动态SQL调用包中函数或过程
动态SQL主要是用于针对不同的条件或查询任务来生成不同的SQL语句.最常用的方法是直接使用EXECUTE IMMEDIATE来执行动态SQL语句字符串或字符串变量.但是对于系统自定义的包或用户自定的包 ...
- Linux系统编程(23)——信号的阻塞
实际执行信号的处理动作称为信号递达(Delivery),信号从产生到递达之间的状态,称为信号未决(Pending).进程可以选择阻塞(Block)某个信号.被阻塞的信号产生时将保持在未决状态,直到进程 ...
- Debug of bash , perl and python
1.bash -x script 2.perl -d script 3. python -m pdb script n: execute the next line s: execute the ...
- Unity 移动MM自签名方式
在使用Unity接移动MM SDK的时候,最后有一个签名. 主要是把计费文件和版权文件放入APK的根目录. 搞了半天才知道前来这么简单..... 软件使用: apk签名工具apktool
- IOS Application生命周期
第一阶段 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *) ...
- uva 714 - Copying Books(贪心 最大值最小化 二分)
题目描写叙述开头一大堆屁话,我还细致看了半天..事实上就最后2句管用.意思就是给出n本书然后要分成k份,每份总页数的最大值要最小.问你分配方案,假设最小值同样情况下有多种分配方案,输出前面份数小的,就 ...