表单填写时用回车代替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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
ubuntu上安装python的实例方法
2019/09/30 Python
python类中super() 的使用解析
2019/12/19 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
陈欧广告词
2014/03/14 职场文书
新年主持词
2014/03/27 职场文书
节约用水倡议书
2014/04/16 职场文书
未婚证明格式
2015/06/15 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
怎样写好工作计划
2019/04/10 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
如何使用Python实现一个简易的ORM模型
2021/05/12 Python