怎么在输入框中输入2位数字后就自动跳转到下一个输入框
日期：2014-05-16 浏览次数：20609 次
如何在输入框中输入2位数字后就自动跳转到下一个输入框?
如题,我在一个页面中,有很多成绩的输入框,我现在是这样写的:
<script type="text/javascript" language="javascript">
function checkcj()
{
if(event.keyCode==13)event.keyCode=9
}
</script>
<input name="c1" type="text" onkeydown="checkcj()">
<input name="c2" type="text" onkeydown="checkcj()">
<input name="c3" type="text" onkeydown="checkcj()">
......
目前,只能达到输入成绩后,一按回车键就相当于按tab键,自己跳转到下一个input,
但我现在想换成,输入两位数的成绩后直接跳转到下一下input,比如:我按下: "8" "5"这两个键后,就自己跳转到下一个input,而不用我再按一次回车键,请教如果实现?
如果是个位数的,比如只有9分,则再按一次回车键跳转到下一个input,又如何实现呢?
谢谢!
------解决方案--------------------
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex;
//是否到了最后一个文本框
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus();
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>
在W3C教程里看到
------解决方案--------------------
<script type="text/javascript" language="javascript">
function $(id) {
return document.getElementById(id);
}
function checkcj(thisObj)
{
//form中input的个数
var formLen = $("f1").length;
//input允许输入的最大长度
var maxLen = thisObj.maxLength;
//当前input输入的长度
var thisObjLen = thisObj.value.length;
if (maxLen == thisObjLen){
var nextInput=thisObj.tabIndex;
//是否到了最后一个文本框
if (nextInput<$("f1").length)
{
$("f1").elements[nextInput].focus();
}
}
}
//判断是否回车
function checkcj2(){
if(event.keyCode==13)event.keyCode=9
}
//设置onkeydown事件
window.onload = function(){
thisObj = document.getElementsByTagName("INPUT")
for(i=0;thisObj.length;i++){
thisObj[i].onkeydown = checkcj2;
}
}
</script>
<form name="f1" id="f1">
<input name="c1" tabindex="1" maxlength="2" type="text" onkeyup="checkcj(this)">
<input name="c2" tabindex="2" maxlength="2" type="text" onkeyup="checkcj(this)">
<input name="c3" tabindex="3" maxlength="2" type="text" onkeyup="checkcj(this)">
</form>
如题,我在一个页面中,有很多成绩的输入框,我现在是这样写的:
<script type="text/javascript" language="javascript">
function checkcj()
{
if(event.keyCode==13)event.keyCode=9
}
</script>
<input name="c1" type="text" onkeydown="checkcj()">
<input name="c2" type="text" onkeydown="checkcj()">
<input name="c3" type="text" onkeydown="checkcj()">
......
目前,只能达到输入成绩后,一按回车键就相当于按tab键,自己跳转到下一个input,
但我现在想换成,输入两位数的成绩后直接跳转到下一下input,比如:我按下: "8" "5"这两个键后,就自己跳转到下一个input,而不用我再按一次回车键,请教如果实现?
如果是个位数的,比如只有9分,则再按一次回车键跳转到下一个input,又如何实现呢?
谢谢!
------解决方案--------------------
<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex;
//是否到了最后一个文本框
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus();
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>
在W3C教程里看到
------解决方案--------------------
<script type="text/javascript" language="javascript">
function $(id) {
return document.getElementById(id);
}
function checkcj(thisObj)
{
//form中input的个数
var formLen = $("f1").length;
//input允许输入的最大长度
var maxLen = thisObj.maxLength;
//当前input输入的长度
var thisObjLen = thisObj.value.length;
if (maxLen == thisObjLen){
var nextInput=thisObj.tabIndex;
//是否到了最后一个文本框
if (nextInput<$("f1").length)
{
$("f1").elements[nextInput].focus();
}
}
}
//判断是否回车
function checkcj2(){
if(event.keyCode==13)event.keyCode=9
}
//设置onkeydown事件
window.onload = function(){
thisObj = document.getElementsByTagName("INPUT")
for(i=0;thisObj.length;i++){
thisObj[i].onkeydown = checkcj2;
}
}
</script>
<form name="f1" id="f1">
<input name="c1" tabindex="1" maxlength="2" type="text" onkeyup="checkcj(this)">
<input name="c2" tabindex="2" maxlength="2" type="text" onkeyup="checkcj(this)">
<input name="c3" tabindex="3" maxlength="2" type="text" onkeyup="checkcj(this)">
</form>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
