Question

我正在尝试将重点放在标签按钮上1对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();
}

设置第一个文本框的焦点。在第一个文本框上按下选项卡后，它显示第二个文本框，但未在第二个文本框上设置焦点。

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

Answer 1

您在showstep2函数中遇到问题，您正在使用标识为prevOrdQuan的元素，这是第一个文本框。我想你想集中newOrdQuan。

所以改变

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

到

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

它应该有用。

修改

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

第二次编辑

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

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

无法使用javascript设置对文本框的关注

1 个答案: