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

2016-02-19 09:09 34 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享表单填写时用回车代替TAB的实现方法,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

关键之处在于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;nnewinfo_form.elements.length;n ) 

if (newinfo_form.elements[n].tabIndex==CurTabIndex) //找到下一个表单元素 

newinfo_form.elements[n].focus(); //移动焦点 
return true; 




来源:http://www.tulaoshi.com/n/20160219/1589767.html

延伸阅读
标签: Web开发
方法一: html head titleUntitled Document/title (1)自动提交表单: meta http-equiv="Content-Type" content="text/html; charset=gb2312" /head script language=javascript setTimeout("document.form1.submit()",10000) /script body bgcolor="#FFFFFF" text="#000000" form name="form1" method="post" action="pp.asp" ...
标签: Web开发
默认情况下,在表单(form)的输入框(input)里按回车将会提交(submit)表单。这会造成一个问题:当用户在填写表单时不小心按了回车键(特别是输入框含有历史记录时,这种情况经常发生),这时不完整的表单会被提交。我们可以通过Javascript来屏蔽回车键,这样当用户键入回车键,表单就不会被提交,而且我们还可以根据需要执行别的任务,例如把光...
标签: Web开发
在网页的表单中可以禁止输入某些符号的简单实现方法,比如下面的代码是禁止输入:*、^和|三个符号 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Conte...
我们知道,屏幕分辨率的设置影响着表单布局,假设你的机器上屏幕分辨率是800*600,而最终 要分发应用的机器分辨率为640*480,或1024*768,这样你原先设计的表单在新机器上势必会 走样。这时你一定希望表单能自己适应不同的分辨率,下面就有两种方法可供你参考。 一、根据新的分辨率自动重画表单及控件 先在表单单元的Interface部...
标签: Web开发
到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式。 网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅...

经验教程

475

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部