javascript - 无法使用 javascript 将焦点设置在文本框上

Question

我试图在按 Tab 键时将焦点设置在文本框上 1 by 1，但它对我不起作用。

这是我尝试过的代码:

function showstep2() {
    document.getElementById('step2').style.visibility = 'visible'
    document.getElementById('prevOrdQuan').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();
}

HTML:

<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>

有 3 个文本框，对于第一个文本框，我将焦点设置为加载，如下所示:

 function setFocus() {
    document.getElementById("prevOrdQuan").focus();
}

它为第一个文本框设置焦点。在第一个文本框上按 Tab 键后，它会显示第二个文本框，但焦点未设置在第二个文本框上。

这只是我需要解决的问题。

Answer 1

您在 showstep2 函数中遇到问题，您将焦点集中在 id prevOrdQuan 的元素上，这是第一个文本框。我认为您想关注 newOrdQuan。

所以改变

document.getElementById('prevOrdQuan').focus();

至

document.getElementById('newOrdQuan').focus();

它应该可以工作。

编辑

您还需要文本框下方可聚焦的任何内容(附加输入等)。否则，如果您在第一个(也是唯一一个)文本框上按 Tab，浏览器会将地址栏聚焦，从而在下一个文本框上触发 onblur 事件并同时显示两个文本框。这是我的意思的一个例子:http://jsfiddle.net/24TK4/1/

第二次编辑

我认为这是问题的一个优雅的解决方案:http://jsfiddle.net/24TK4/2/

看看HTML代码中的链接，它只是显示了一个不可见的链接。