表单填写时用回车代替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 类
Nov 07 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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 变量定义和变量替换的方法
2009/07/30 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Python修改MP3文件的方法
2015/06/15 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python 常见的排序算法实现汇总
2020/08/21 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
测绘工程本科生求职信
2013/10/10 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python