表单填写时用回车代替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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
js评分组件使用详解
Jun 06 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
js实现开关灯效果
Mar 30 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
关于 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
2019十大人气国漫
2020/03/13 国漫
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP图片加水印实现方法
2016/05/06 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python3.4实现邮件发送功能
2018/05/28 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
党员干部承诺书
2014/03/25 职场文书
小学生综合素质评语
2014/04/23 职场文书
2014年党委工作总结
2014/11/22 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript