表单填写时用回车代替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中的隐式类型转换
Dec 05 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
简单实现js浮动框
Dec 13 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Vue获取微博授权URL代码实例
Nov 04 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令牌 Token改进版
2008/07/18 PHP
php session劫持和防范的方法
2013/11/12 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
koa-router源码学习小结
2018/09/07 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
Python Flask框架扩展操作示例
2019/05/03 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
2014年双拥工作总结
2014/11/21 职场文书
MySQL创建定时任务
2022/01/22 MySQL