表单填写时用回车代替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 触发事件列表 比较不错
Sep 03 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
浅谈Python中的闭包
2015/07/08 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
详解KMP算法以及python如何实现
2020/09/18 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
党员学习十八大感想
2014/01/17 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
教师自荐信范文
2015/03/06 职场文书
公积金具结保证书
2015/05/11 职场文书
小学生暑假生活总结
2015/07/13 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书