表单填写时用回车代替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中更短的 Array 类型转换
Oct 30 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
微信小程序实现星级评价
Nov 20 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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+mysql分页代码详解
2008/03/27 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
python列表去重的二种方法
2014/02/14 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Pandas分组与排序的实现
2019/07/23 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python redis存入字典序列化存储教程
2020/07/16 Python
日语专业个人求职信范文
2014/02/02 职场文书
电子专业求职信
2014/06/19 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
法定授权委托证明书
2014/09/27 职场文书
八项规定整改方案
2014/10/01 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
python 判断文件或文件夹是否存在
2022/03/18 Python