表单填写时用回车代替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操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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实现阳历到农历转换的类实例
2015/03/07 PHP
php给图片加文字水印
2015/07/31 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python复制目录结构脚本代码分享
2015/03/06 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python模块如何查看
2020/06/16 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python中append函数用法讲解
2020/12/11 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
班干部竞选演讲稿
2014/04/24 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android