CODEWITHSUNDEEP
javascripthtml
Naz
Naz

Reputation: 2775

loop focus of input fields inside a form

<form>
    <input tabindex="1" required>
    <input tabindex="2" required>
    <input>
    <input tabindex="3" required>
    <input>
    <input tabindex="4" required>
    <input tabindex="5" required>
    <button type="button" tabindex="6"></button>
    <button type="submit" tabindex="7"></button>
</form>

Here I have a form with some input fields and two button at the end of the form... and I am using tabindex attribute to focus them in order... now on tab key down I need to focus the first input field with tabindex="1" after release focus from the submit button as like as the form focus input field of tabindex="3" after releasing focus from input field of tabindex="2"... How can I do that...??

please don't use any jQuery... only javascript or html...

Upvotes: 1

Views: 4888

Answers (2)

cal
cal

Reputation: 870

Black Cobra's answer works, unless you're using your id attributes for something (which I was). It's easy enough to edit his code to work for anyone though:

<form>
    <input tabindex="2" autofocus required>
    <input tabindex="3" required>
    <input>
    <input tabindex="4" required>
    <input>
    <input tabindex="5" required>
    <input tabindex="6" required>
    <button type="button" tabindex="7"></button>
    <button type="submit" tabindex="8" id=""
            onFocus="this.tabIndex=1;"
            onBlur="this.tabIndex=8;">
    </button>
</form>

I just changed this:

        onFocus="this.id=this.tabIndex;this.tabIndex=1"
        onBlur="this.tabIndex=this.id">

to this:

        onFocus="this.tabIndex=1;"
        onBlur="this.tabIndex=8;">

It's not dynamic, but it's really easy. If you want dynamic, see here.

Upvotes: 2

Naz
Naz

Reputation: 2775

Finally, I have solved my problem... with HTML and a little javascript it can be done easily... means loop focus of input fields inside a form...

<form>
    <input tabindex="2" autofocus required>
    <input tabindex="3" required>
    <input>
    <input tabindex="4" required>
    <input>
    <input tabindex="5" required>
    <input tabindex="6" required>
    <button type="button" tabindex="7"></button>
    <button type="submit" tabindex="8" id=""
            onFocus="this.id=this.tabIndex;this.tabIndex=1"
            onBlur="this.tabIndex=this.id">
    </button>
</form>

Here I skip the tabindex="1" and start with tabindex="2"... then I add 2 more attribute in the submit button... onFocus & onBlur... moreover, I am using the id attribute to memory the primary or real tabindex number of the submit button... when the user will focus on the submit button, javascript will change its tabindex from 8 to 1... now if the user hit the tab button the form will try to find out the element that have the next tabindex... means the first input field... again, when the focus will leave the submit button, javascript will retrieve its real tabindex from its id... means the tabindex will be changed from 1 to 8... in this way the focus will keep looping inside the form...

Live Demo

Upvotes: 1

Related Questions