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，将其更改为正常顺序。如果没有显示文本字段，它将按选项卡的顺序跳过，因此当它没有被隐藏时，它将不会被跳过。

你的桌子示例：

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

在谷歌浏览器中进行了测试，它正如您所期望的那样工作。

修改

您想要将事件的第二个输入聚焦到第二个输入可见，您可以通过将焦点设置为输入来实现这一点。你可以通过编辑你的函数来做到这一点：

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

标签到HTML中尚未显示的元素

1 个答案: