表单填写时用回车代替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 计算当天是本年本月的第几周
Mar 22 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
js实现自定义右键菜单
May 18 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php实现简单爬虫的开发
2016/03/28 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
用循环或if语句从json中取数据示例
2014/08/18 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python 自定义装饰器实例详解
2019/07/20 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
竞聘上岗演讲
2014/05/19 职场文书
党员承诺书范文
2014/05/19 职场文书
工作感想范文
2015/08/07 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers