How do you skip over hidden fields when using enter key as a tab in javascript

Question

I have a asp.net web application that is being developed for IE11 and I am trying to have the Enter key function the same as the Tab key. Most of the time it works fine with the code below. However if there are fields that are disabled or in a div that is hidden the Enter key does not advance to the next enabled and visible field.

Here is what i have:

I have the following on my main div so it applies to all text boxes: onkeydown="changeEnterToTab()

The functions fire properly but the getNextElement function returns a field that is not displayed or is disabled.

Any ideas?

    function changeEnterToTab() {
        var node = (event.target) ? event.target : ((event.srcElement) ? event.srcElement : null);
        if ((event.keyCode == 13) && ((node.type == "text") || (node.type == "radio"))) {
            getNextElements(node).focus();
            return false;
        }
    }

    function getNextElement(field) {
        var form = field.form;
        for (var e = 0; e < form.elements.length; e++) {
            if (field == form.elements[e]) {
                e++;
                break;
            }
        }
        e++;
        debugger;
        while (form.elements[e % form.elements.length].type == "hidden") {
            e++;
        }
        return form.elements[e % form.elements.length];
    }

I haven't tested this, but if you'd check `node === document.activeElement` after setting focus to `node`, you would find out if the current `node` is focusable. Then just recall `getNextElement` untill a focusable element will be found. — Teemu, Jul 03 '14 at 19:22
The activeElement is returning false for both the node that I am leaving and the node that I am trying to skip so that doesn't work. — Ben, Jul 03 '14 at 20:24
[Seems to work for me](http://jsfiddle.net/dmp78/). My previous comment was maybe a bit poorly worded, `getNextElement` as it is can't be used. At the fiddle checking `activeElement` works fine, and hidden/disabled elements are not focused. Though I'd rather use `tabIndex`, and toggled it between -1 and 0, then it could be used to check the tabbing order in the keydown handler too. — Teemu, Jul 04 '14 at 06:08

bg.dev · Answer 1 · 2014-07-03T19:27:30.517

0

Put all your hidden controls at the top of the form so the user will only "tab" to the rest visible control.

~~You can exclude the control from the tab order by set its tabIndex to -1~~

<input type="text" name="username" tabIndex="-1" />

edited Jul 03 '14 at 19:27

answered Jul 03 '14 at 19:13

bg.dev

68
7

Though this is true, OP is emulating `TAB` with `ENTER` using JavaScript, hence the tabbing order is not used. – Teemu Jul 03 '14 at 19:16
Well, just realized that. Edited :) – bg.dev Jul 03 '14 at 19:22
The hidden controls dynamically show/hide and enable/disable and are throughout the form itself so i cannot put them all at the top. – Ben Jul 03 '14 at 20:20
@Ben I found this: http://stackoverflow.com/questions/4494552/change-enter-from-submission-to-tab – bg.dev Jul 04 '14 at 11:02

score 0 · Answer 2 · answered Jul 03 '14 at 20:27

0

I did not find an actual answer to this question but I got around the issue by reordering the TabIndex completely to handle the instances where the controls are hidden/disabled.

Thanks for the ideas though guys.

answered Jul 03 '14 at 20:27

Ben

111
1
3
16

How do you skip over hidden fields when using enter key as a tab in javascript

2 Answers2