表单填写时用回车代替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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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
239军机修复记
2021/03/02 无线电
smtp邮件发送一例
2006/10/09 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
常用jQuery代码分享
2015/07/14 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Vue2.0如何发布项目实战
2017/07/27 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
详解vue高级特性
2020/06/09 Javascript
python中文编码问题小结
2014/09/28 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
mac系统安装Python3初体验
2018/01/02 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Django values()和value_list()的使用
2020/03/31 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
python在协程中增加任务实例操作
2021/02/28 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
自我鉴定注意事项
2014/01/19 职场文书
建房协议书
2014/04/11 职场文书
车辆年审委托书范本
2014/09/18 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers