表单填写时用回车代替TAB的实现方法


Posted in Javascript onOctober 09, 2007

关键之处在于tabindex,其设计思想是:为每个表单元素设置一个tabindex,其值分别为前一个表单元素的tabindex的值加一,函数的功能就是当用户按下回车键时先将当前tabindex的值加一,而后逐一与每个表单元素的tabindex值进行对比,如若相等,则将焦点移至该表单元素之上。 

首先,我们需要在表单体中设定一个onkeyup事件: 
<form name="xxx" action="YYY.asp" method="post" onkeyup="return changefocus_onkeyup()" language="javascript"> 

其次,在每一个表单元素中设定一个tabindex值,假定该表单有三个元素,则我们分别设定tabindex值如下: 
<input type=text name="txtName" size="16" tabindex=1> 
<input type=checkbox name="chkSign" tabindex=2> 
<textarea name="tarContent" tabindex=3> 

最后,写出changefocus函数如下: 
function newinfo_form_onkeyup() 

key=window.event.keyCode; 
if(key==0xD)//判断是否按下回车键 

CurTabIndex=event.srcElement.tabIndex 1//将当前tabindex的值加1 
for (n=0;n<newinfo_form.elements.length;n ) 

if (newinfo_form.elements[n].tabIndex==CurTabIndex) //找到下一个表单元素 

newinfo_form.elements[n].focus(); //移动焦点 
return true; 




Javascript 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 #Javascript
JavaScript加密解密7种方法总结分析
Oct 07 #Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 #Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 #Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 #Javascript
javascript入门·对象属性方法大总结
Oct 01 #Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 #Javascript
You might like
PHP 读取文件的正确方法
2009/04/29 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
职业生涯规划书前言
2014/04/15 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
学年个人总结范文
2015/03/05 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python