表单填写时用回车代替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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
关于 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
服务器web工具 php环境下
2010/12/29 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JS 实现图片直接下载示例代码
2013/07/22 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
Vue表单实例代码
2016/09/05 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python configparser模块常用方法解析
2020/05/22 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
圣诞节活动策划方案
2014/06/09 职场文书
感谢信怎么写
2015/01/21 职场文书
市场部经理岗位职责
2015/02/02 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Python进程间的通信之语法学习
2022/04/11 Python
Django框架中视图的用法
2022/06/10 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS