javascript - 按 T​​ab 键切换到 HTML 中尚不可见的元素

Question

我有一个三行的表。每行都有一个标签和一个文本框。第二行最初是隐藏的。

如果第一个文本框中的数字超过一个，下面的代码将使第二行可见。

但是，如果在第一个框中输入数字，然后按 TAB 键，则光标将移动到第三个文本框 - 因为第二个文本框尚不可见。

如果第二行可见，是否有一种巧妙的方法可以让光标按 TAB 键移动到第二个文本框？

谢谢

<SCRIPT>
function changePrinciplePayments(aVal) {
    if (aVal > 1) {
        $('#paymentFrequency').show();
    } else {
        $('#paymentFrequency').hide();
    }
}
</SCRIPT>



 <table>
    <tr class="Blocks">
            <td>Number of Payments:</td>

        <td><input class="Form80" id="numPrincipalPayments" onblur=
        "changePrinciplePayments(this.value);" tabindex="18" type=
        "text"></td>
    </tr>

    <tr class="Blocks" id="paymentFrequency" style="display:none;">
        <td>Payment Frequency:</td>

        <td><input tabindex="19" type="text"></td>
    </tr>

    <tr class="Blocks" id="paymentType">
        <td>payment Type:</td>

        <td><input tabindex="20" type="text"></td>
    </tr>
</table>

Answer 1

是因为你的tabindex的问题，把它改成正常的顺序吧。如果一个textfield没有显示，它会按照tab的顺序被跳过，所以当它不隐藏时，它不会被跳过。

表格示例:

<table>
    <tr class="Blocks">
        <td>Number of Payments:</td>
        <td>
            <input class="Form80" id="numPrincipalPayments" onblur="changePrinciplePayments(this.value);" tabindex="18" type="text">
        </td>
    </tr>
    <tr class="Blocks" id="paymentFrequency" style="display:none;">
        <td>Payment Frequency:</td>
        <td>
            <input tabindex="19" type="text">
        </td>
    </tr>
    <tr class="Blocks">
        <td>Number of Payments:</td>
        <td>
            <input class="Form80" id="someId" tabindex="20" type="text">
        </td>
    </tr>
</table>

在 Google Chrome 中对此进行了测试，它的工作效果符合您的预期。

编辑

您希望在第二个输入可见的事件上将焦点集中到第二个输入，您可以通过将焦点设置到输入来非常简单地实现此目的。您可以通过将函数编辑为如下内容来完成此操作:

function changePrinciplePayments(aVal) {
    var element = $('#paymentFrequency');
    if (aVal > 1) {
        element.show();
        element.find('input').focus();
    } else {
        element.hide();
    }
}

编辑2

您甚至可以通过不监听 onblur 来以更好的方式做到这一点，但在 onchange 上，它会看起来像这样:

您的行:

<tr class="Blocks">
    <td>Number of Payments:</td>
    <td>
        <input class="Form80" id="numPrincipalPayments" onchange="changePrinciplePayments(this.value);" tabindex="18" type="text">
    </td>
</tr>

你的功能:

function changePrinciplePayments(aVal) {
    var element = $('#paymentFrequency');
    if( !$.isNumeric(aVal) ) {
        element.hide();            
        return true;
    }

    if (aVal > 1) {
        element.show();
        element.find('input').focus();
    } else {
        element.hide();
    }

    return true;
}