表单填写时用回车代替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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
浅谈Vue的computed计算属性
Mar 21 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python中的字典操作及字典函数
2018/01/03 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
如何利用Python 进行边缘检测
2020/10/14 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
三十年同学聚会致辞
2015/07/28 职场文书
法院执行局工作总结
2015/08/11 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android