表单填写时用回车代替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的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue实现在线翻译功能
Sep 27 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python使用opencv进行人脸识别
2017/04/07 Python
python实现倒计时小工具
2019/07/29 Python
解决python 文本过滤和清理问题
2019/08/28 Python
Python中Selenium库使用教程详解
2020/07/23 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
空乘英文求职信
2014/04/13 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python