`
cherryQQ
  • 浏览: 1126486 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

js 使文本框的焦点移动

阅读更多
我前段时间看了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"的方式来取消链接获得焦点.

分享到:
评论

相关推荐

    js实现文本框中焦点在最后位置

    }这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题… 那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符...

    js常用100例方法 正则 移动设备判断 金额转换等 页面resize 超实用

    23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 28、原生JavaScript IP转成整型 29、原生JavaScript整型解析为IP地址 31、原生JavaScript判断是否移动设备 32...

    js移动焦点到最后位置的简单方法

    当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。 代码如下: var el = document.getElementById('txtArticle'); var range = el....

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 25、原生JavaScript格式化CSS样式代码 26、原生JavaScript压缩CSS样式代码 27、原生JavaScript获取当前路径 28...

    JS实现方向键切换输入框焦点的方法

    本文实例讲述了JS实现方向键切换输入框焦点...当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度。 运行效果截图如下: 在线演示地址如下: ...

    javascript实现按回车键切换焦点

    前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算;在...

    javaScript常用事件

    常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...

    程序天下:JavaScript实例自学手册

    3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 ...

    JavaScript网页特效范例宝典源码

    实例198 通过键盘使单元格焦点任意移动 306 7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 ...

    javascript函数的解释

    49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示的HTML:&lt;noscript&gt;&lt;/noscript&gt; 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例...

    javascript常用对象梳理

    功能:使窗口中得到焦点。当与blur方法合用时必须小心,因为可能导致焦点不 断移进移出。 24. captureEvent方法 语法格式: window.captureEvent(Event) window.captureEvent(事件1|事件2|...|事件n) 功能:...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript快速处理日期时间的操作。 5_1.htm 获取当前日期并显示在HTML页中。 5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示...

    JavaScript实例精通

    JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...

    js使用小技巧

    取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...

    使用CSS实现outline切换的动画效果

    我记得有个版本的迅雷软件,会发现focus文本框时候,其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。 今天,偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果,...

    firefox-viewsourcewith:主要目标允许用户使用外部应用程序打开(并在某些情况下编辑)页面源

    PDF 链接使用您喜欢的编辑器编辑文本框内容,并在您重新切换焦点时自动在浏览器上看到修改后的文本,这简化了 wiki 页面编辑打开生成浏览器内容的服务器端页面,这简化了 Web 开发人员的调试打开 Javascript 控制台...

    50个项目:HTML,CSS,JS中的50个小项目(Brad Traversy在Udemy上的课程)

    展开搜索图标以显示文本框 加载页面逐渐成为焦点 动态内容输入滚动动画 双着陆页,鼠标焦点扩展了动画 表单字段上的文本移动动画单击 具有HTML音频的可点击音板 爸爸笑话发生器从外部API提取内容 每按一次,在浏览器...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...

Global site tag (gtag.js) - Google Analytics