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 键后，它显示第二个文本框，但焦点未设置在第二个文本框上。

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

4

1 回答 1

1

您在showstep2函数中遇到问题，您正在关注prevOrdQuan第一个文本框 id 的元素。我想你想集中注意力newOrdQuan。

所以改变

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

至

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

它应该工作。

编辑

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

第二次编辑

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

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

于 2013-10-06T17:25:48.600 回答