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

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

时间: 2024-11-05 16:26:08

表单填写时用回车代替TAB的实现方式的相关文章

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

关键之处在于tabindex,其设计思想是:为每个表单元素设置一个tabindex,其值分别为前一个表单元素的tabindex的值加一,函数的功能就是当用户按下回车键时先将当前tabindex的值加一,而后逐一与每个表单元素的tabindex值进行对比,如若相等,则将焦点移至该表单元素之上.  首先,我们需要在表单体中设定一个onkeyup事件:  <form name="xxx" action="YYY.asp" method="post"

如何评估表单填写效率:用KLM-GOMS分析

如何评估你的表单填写效率-使用KLM-GOMS去分析你的表单效率 很多时候用户测试很难测试到表单的效率,通常的做法是,表单上线后来统计用户使用或者停留的时间来考量表单的效率,但是这种做法只能针对已经上线后的表单来考量.那么在一个表单在设计过程中,是否有什么科学的办法评估到所设计表单的效率呢? 1983年Card,Moran & Newall就在<人机交互心理学>(The Psychology of Human Computer Interaction)首次提及了GOMS模型,在早期人机

如何评估网站表单填写效率 使用KLM-GOMS分析表单效率

中介交易 SEO诊断 淘宝客 云主机 技术大厅 编辑:S++小组 很多时候用户测试很难测试到表单的效率,通常的做法是,表单上线后来统计用户使用或者停留的时间来考量表单的效率,但是这种做法只能针对已经上线后的表单来考量.那么在一个表单在设计过程中,是否有什么科学的办法评估到所设计表单的效率呢? 1983年Card,Moran & Newall就在<人机交互心理学>(The Psychology of Human Computer Interaction)首次提及了GOMS模型,在早期人机

7个方法帮你全面提升WEB表单填写体验

  如果网站是一座小院儿,注册登录页就是那扇大门,用户是走是留很大程度就取决于那道门槛的设计,今天腾讯的同学总结了7个实用的方法,能有效帮助用户提升表单填写的整体体验,宾客临门还是门可罗雀?就看这篇了. 我们几乎每天都会接触形形色色的表单,登录账号.填写信息以获取服务.发布内容等.然而填写表单的过程往往不是特别愉悦的,我们需要消耗时间输入信息,点击提交,可能还需要等待审核;尤其是碰到较为复杂.流程长的表单,如果用户体验较差,很容易让人产生挫败感,在中途选择放弃. 那么,如何提高用户填写表单的效率

让用户更高效地完成表单填写

  填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录.购物等,都需要填写各种表单.用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式.那么表单设计的首要目标也更清晰:让用户迅速高效快捷并且轻松地完成填写. 设计目标已清晰,那么如何设计表单呢,以下从表单的内容.组织方式.流程.表单元素控件及交互等方面详细阐述. 表单的元素 研究如何提高表格可用性之前,我们先简要了解下一般表单的元素,这里我们暂且这么总结: 标签:告诉用户表单问题是什么; 输入框:供给用户填

网站设计:让用户更高效地完成表单填写

填写互联网表单几乎是每个用户每天的经历,如用户进行网站注册和登录.购物等,都需要填写各种表单.用户为了获得想要的东西,表单成了用户完成需求和网站系统需要数据之间的互动形式.那么表单设计的首要目标也更清晰:让用户迅速高效快捷并且轻松地完成填写. 设计目标已清晰,那么如何设计表单呢,以下从表单的内容.组织方式.流程.表单元素控件及交互等方面详细阐述. 表单的元素 研究如何提高表格可用性之前,我们先简要了解下一般表单的元素,这里我们暂且这么总结: 标签:告诉用户表单问题是什么? 输入框:供给用户填写答

《Web测试囧事》——2.2 页面字段依赖导致表单提交时出错

2.2 页面字段依赖导致表单提交时出错 小蔡最近在测试中碰到一个有意思的问题,就是在提交表单时,如果不按表单设定好的由上到下的顺序一个个填写表单内容,那么在提交时就会出现提交失败的错误. 小蔡感觉到很奇怪,表单顺序的填写居然也会影响到功能?那就随着小蔡看看这个问题是怎么发现的,以及是什么原因引起的吧. 小蔡在测试用户注册账户页面时发现,注册页面内容很多而且表单很长,所以她就使用鼠标滚动,没想到滚动得过快导致有些选项并没有填写/选择,最后等到她提交表单时才发现这一点.她只好重新滚动到漏填/选的字段

jQuery实现表单提交时判断的方法_jquery

本文实例讲述了jQuery实现表单提交时判断的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <input type="submit" id="myBtn" /> 换成: 复制代码 代码如下: <input type="button" id="myBtn" /> 使用: 复制代码 代码如下: $("#myBtn").click(function(){    ..

html-在设计表单提交时为什么更多的是用button而不是submit?

问题描述 在设计表单提交时为什么更多的是用button而不是submit? RT.button的优势在哪里?submit难道不是更直观一点吗? 解决方案 submit有时直接就提交了,不走javaScript等等,button是可以走javaScript和后台代码的.这是我个人理解. 解决方案二: 现在更多的人用button来做异步提交 解决方案三: submit默认为form提交,可以提交表单(form). button则响应用户自定义的事件 如果不指定onclick等事件处理函数,它是不做任