无法使用 JavaScript 在文本框上设置焦点

unable to set focus on textboxes using javascript

本文关键字：设置 焦点 文本 JavaScript      更新时间：2023-09-26

我正在尝试在按表键上将焦点 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();
}

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

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

您在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 代码的链接，它只显示一个不可见的链接。

相关文章：