嗨,我想在标签按下时一一显示文本框。
首先我需要显示 1 个文本框,然后在按下选项卡后,第二个文本框将显示焦点。然后第三个和第四个文本框具有相同的过程。
我能够显示文本框,但是在第一个文本框之后,当我按下制表符而不是文本框时,所有文本框都在显示。
这是我的代码:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep5();" /></td>
</tr>
</tbody>
</table>