当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 表单填写时用回车代替TAB的实现方法

Javascript
图片展示效果 鼠标经过变大图,支持FF
可拖动可改变大小div的实现代码
javascript 随机广告代码(图片广告)
JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
JQuery 浮动导航栏实现代码
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
js 分栏效果实现代码
基于jQuery的ajax功能实现web service的json转化
IE 条件注释详解总结(附实例代码)
用cssText批量修改样式
JavaScript 应用技巧集合[推荐]
jquery 导航设计实现代码 学习jquery的朋友可以看下
动态样式类封装JS代码
一步一步教你写一个jQuery的插件教程(Plugin)
使用jQuery的ajax功能实现的RSS Reader 代码
jquery tools 系列 scrollable(2)
jquery tools系列 overlay 学习
jquery tools系列 expose 学习
javascript十个最常用的自定义函数(中文版)
javascript 流畅动画实现原理

Javascript 中的 表单填写时用回车代替TAB的实现方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 273 ::
收藏到网摘: n/a

关键之处在于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;
}
}
}
}