解决WEB页面上"焦点控制"一法

解决WEB页面上"焦点控制"一法

分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报

webjavascriptasp.netbuttonvbscripthtml

对于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"中,其他页面都会继承他,从而可以在很多页面进行控制. 如有其他好办法,希望大家讨论.

时间: 2024-11-05 02:37:49

解决WEB页面上"焦点控制"一法的相关文章

js在web页面上绘制圆形

在web页面上,想要画出一个圆形,方法有很多,SVG.canvas都可以绘图.但是本文不采用这两种方式,而是使用一个div.div一般是一个矩形,但是如果设置一个圆角样式border-radius就可以将div变成圆形. 圆的位置需要在画布中绝对定位(position: absolute),也就是通过设置X.Y坐标在定位,对应的css样式是left.top.想要圆的绝对定位起效,画布就要设置position:relative. <!DOCTYPE html> <html> <

HTML5 File接口(在web页面上使用文件)

File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象.File对象是一种特殊的Blob,它能够在任何能够使用Blob的上下文中使用. 要在web页面中使用文件,通常需要涉及到的对象有:File对象,FileList对象,FileReader对象. FileList对象 FileList来自于两个地方,分别是input元素的file

Web页面上传功能

注:参考消保维权系统,登记页面上传功能 1.JSP页面: <%@page import="com.wondersgroup.esf.base.util.ApplicationContextUtil"%> <%@ page language="java" pageEncoding="UTF-8"%> <%@ include file="../../../common/taglib.jsp" %>

使用python在WEB页面上生成EXCEL文件

来自:http://blog.sina.com.cn/s/blog_5d18f85f0101bxo7.html 近日写的一个程序需要在WEB服务器上生成EXCEL文件供用户下载,研究了一下找到了以下比较可行的实现方案,下面以web.py为例,把相关代码贴出来供大家参考: 首先需要下载生成EXCEL的模块,推荐使用xlwt import xlwt import StringIO import web urls = ( '/rim_request','rim_request', '/rim_expo

怎样在一个WEB页面上显示当前月历

第一次写博客,最近一直在忙毕业设计.今晚抽了些时间修改一些当时发现了却不想去修改的小错误,在我的系统的用户主页上,曾经为了填补页面的空白,我自己用JavaScript写了月历小插件放上去了.但是后来发现很多时候月历的星期并不准确,想了想知道是在打印月历的时候第一行的空白的算法出问题了.但是被这个项目一直整得很烦的我当时并不想去修改这个问题,今天晚上突然有兴致改了改它,也小怡情一下,写到这里跟大家分享一下. 好了,废话不说了,上正题!写一个日历小插件呢,别的都很简单,什么判断闰.平年和当月天数就不

今天遇到的问题,解决UITableView页面上面的内容先被导航栏覆盖,然后再向下移动的问题 ( 懒加载有时候并不好! )

今天需要在同事的代码接上接口,但发现一个问题,坐标系发生了改变.一般来说,我们都会现在viewDidLoad中创建UITableView;但是这次我是在viewDidLoad发送Http请求后再创建,然后就导致了请求回来后UITableView页面的内容先整体向上移被导航栏覆盖,然后我移动到我指定的位置,我一直无法,试了又试,后面发现,原因就是我没有在viewDidLoad第一时间创建UITableView,在请求回来再创建,这就导致了UITableView上页面的内容y坐标值由0变成64,造成

web页面上展示图片时,图片不显示,报错:ERR_CONTENT_LENGTH_MISMATCH

问题描述 前端页面加载css,和js文件的时候,经常出现ERR_CONTENT_LENGTH_MISMATCH的报错情况. 查找问题 在单独打开hearder中css,js的网络地址是能打开的,所以排除了最简单的地址错误.前端项目是由nginx代理的,所以可以查看nginx的日志,看看有无线索. 进入${NGINX_HOME}\logs,查看error.log,得到如下信息: 2018/07/13 14:22:49 [crit] 275197#0: *1543 open() "/usr/loca

web页面上鼠标图标的改变

有时为了在特定区域显示特定的鼠标指针,需要设置 cursor属性,通常显示的是系统自带的鼠标指针,如何修改成为显示自定义图标的指针呢? cursor还有一个属性url,但这个属性的用法需要注意一下几点: 从一些网站下载鼠标光标图片(鼠标指针主题包),解压之后,将需要的指针图片文件夹放在web目录下 如:下面假设webroot是网站根目录,网址为http://my.oschina.net/ /webroot/mycursor/ 2.然后修改特定的html标签的css属性,假设静态文件资源是styl

具有自动查找Web页面上所有链接的网络浏览器

http://weibo.com/06K2pp.p2zRP/1001604190479146179442瘟裁锻刚诿RDM覆嗣诩济 http://weibo.com/56M6lp.pZVaP/1001604190479175540855们鸦畏芯讼SUX斩兆扛票 http://weibo.com/cv7XCp.pmuCP/1001604190479196511606镁怕删腺纬JVW丛趴现赌 http://weibo.com/w464Fp.pTP0P/1001604190479225873109盟脱滴