Tabbing to an element which is not yet visible in HTML

Question

I have a table with three rows. Each row has a label and a text-box. The second row is initially hidden.

The code below will make the second row visible if the number in the first text box is more than one.

However, if one enters a number in the first box, and presses TAB, then the cursor is moved to the third text box - because the second text box is not yet visible.

Is there a neat way of getting the cursor to TAB to the second text box, in the event that the second row will be made visible?

Thanks

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

Jimmy Knoot · Accepted Answer · 2014-07-23T14:58:40.673

It is because of your tabindex, change it to the normal order. If a textfield is not displayed, it will be skipped in the order of tabs, so when it is not hidden, it will not be skipped.

Example of your table:

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

Tested this in Google Chrome and it is working as you would expect.

EDIT

You want to focus to the second input on the event the second input is made visible, you can achieve this quite simply by setting the focus to the input. You do this by editing your function to something like this:

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

EDIT 2

You can even do this in a better way by not listening to onblur, but on onchange, it would then look something like this:

Your row:

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

Your function:

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

(I added a third row to my table for clarity) I don't understand what you mean by the normal order. My tabindexes are 18, 19, 20. Thank you! — gordon613, Jul 23 '14 at 14:42
Oh sorry, I think I have misread what you wanted, let me edit my answer for you. — Jimmy Knoot, Jul 23 '14 at 14:43
Regarding what you said. I know if it is not hidden it will not be skipped. However my question is that it is the TAB itself which makes it unhidden... The TAB takes me to the third box before the second box is unhidden. I want the TAB to both unhide the second box AND jump to the second box. I don't know if this is possible — gordon613, Jul 23 '14 at 14:44
OK. This works great - thanks! As a slight variation I added an id to the second text box and then I called .focus() on that element, instead of using .find('input').focus() to find it — gordon613, Jul 23 '14 at 15:00
Yeah I would rather do that too, but I didn't know if it was something you wanted, was just working with what we got :) — Jimmy Knoot, Jul 23 '14 at 15:01
thanks! And thanks for the recommendation of onChange over onBlur (for reference: http://stackoverflow.com/questions/785099/what-is-the-difference-between-onblur-and-onchange-atrribute-in-html ) and also for the error-trapping... — gordon613, Jul 23 '14 at 15:03

Tabbing to an element which is not yet visible in HTML

1 Answers1