当前位置:asp编程网>技术教程>Javascript教程>  正文

按回车后可以自动跳到下一个输入框效果

2013-05-20 23:17:44   来源:www.aspbc.com    作者:majian   浏览量:3350   收藏
<script language="javascript">
<!--
function getValue(_obj){
 var caiying2007=_obj.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML
 caiying2007=parseInt(caiying2007.split("(")[1])
 return caiying2007
}
function checkValue(_obj){
    if(isNaN(_obj.value)){
        alert("必须是数字");
        _obj.value=_obj.value.substr(0,_obj.value.length-1)
        _obj.focus()
        return false;
    }
    var defValue=getValue(_obj)
    if(_obj.value>defValue){
        alert("数值过大!\n\n最高分是:"+defValue+" 分");
        _obj.value=_obj.value.substr(0,_obj.value.length-1)
//        _obj.value=""
        _obj.focus()
    }
}
onload=function init(){
 var obj=document.getElementById("form1").getElementsByTagName("input"),j=obj.length
 for (var i=0;i<j-1;i++)
  obj[i].onkeyup=function(){checkValue(this)}
}
//-->
</script>
<form id="form1" name="form1" method="post" action="<#ZC_BLOG_HOST#>?cat=3">
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>求下面的实现要求:

          一、在输入分数,只动验证输入的有效性:

            1、
          一定要数字(可以是小数)

          2、数值不能大于小题的分值,比如输入8,就提示出错

           

          二、为了提高输入速度,按回车后可以自动跳到下一个输入框

        到最后一个输入框,回车后就跳到 提交保存 按钮,可以手工提交保存
</td>
      </tr>
    </table>
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" onkeydown="if(event.keyCode==13)event.keyCode=9">
      <tr>
        <td><table width="300" border="0" align="right" cellpadding="0" cellspacing="0">
          <tr>
            <td width="104" height="36">题号</td>
            <td width="196">分值</td>
            </tr>
          <tr>
            <td height="31">第1小题(5分)</td>
            <td><input name="t1" type="text" id="t1" size="5"  /></td>
            </tr>
          <tr>
            <td height="31">第2小题(6分)</td>
            <td><input name="t2" type="text" id="t2" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第3小题(7分)</td>
            <td><input name="t3" type="text" id="t3" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第4小题(8分)</td>
            <td><input name="t4" type="text" id="t4" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第5小题(9分)</td>
            <td><input name="t5" type="text" id="t5" size="5" /></td>
            </tr>
        </table></td>
        <td><table width="300" border="0" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="93" height="36">题号</td>
            <td width="207">分值</td>
            </tr>
          <tr>
            <td height="31" nowrap="nowrap">第6小题(15分)</td>
            <td><input name="t6" type="text" id="t6" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第7小题(25分)</td>
            <td><input name="t7" type="text" id="t7" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第8小题(35分)</td>
            <td><input name="t8" type="text" id="t8" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第9小题(45分)</td>
            <td><input name="t9" type="text" id="t9" size="5" /></td>
            </tr>
          <tr>
            <td height="31">第10小题(55分)</td>
            <td><input name="t10" type="text" id="t10" size="5" /></td>
            </tr>
        </table></td>
      </tr>
    </table>
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center">
          <input type="submit" name="button" id="button" value="提交保存" />
        
</td>
      </tr>
    </table>
  </form>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网