Tab index not working in form

Question

I have used this plugin: http://codepen.io/wallaceerick/pen/ctsCz

to customize all the select tag in my website, as you can see in this way the select tags are not visible and not display, they are replaced by a div <div class="select-styled"></div> where any value selected of the option is inserted. I like the simplicity of this code but i would like to give the possibility to the user to use the tab when he fills out the form. Obviously in this case any it's not possible because the select tags are hidden so they are skipped by the tab button.

I have reproduced the case here http://codepen.io/Mannaio/pen/ciFtv where i have inserted an input before and after the select tags and as you can see the tab button only works between the inputs . So my question is , how can i solve this problem? how can i add the tabindex which let me also using the select in the form?

Answer 1

Put explicit tabindex attributes on your select form elements, such as:

<select id="mounth" tabindex="2">

In your script, in the $('select').each(function(){...

Add this:

tabIndex = $this.attr('tabindex');

And modify the line where you insert the styled div version to include the tabindex attribute with the original tabindex number that you have captured with tabIndex:

$this.after('<div class="select-styled" tabindex='+ tabIndex +'></div>');

That should give you what you want.

(Here's a revised page of your codepen page with it in action: http://codepen.io/anon/pen/rIeHd )

Answer 2

Give the first item an index of 1 like so:

<input class="string required" tabindex='1' id="account_last_name" name="account[last_name]" required="required" size="50" type="text" />

Add a counter to your each statment like so:

$('select').each(function(i){/*code*/}

Add the counter+1 to the tab index of the dynamic div like so:

$this.after('<div tabindex='+(i+1)+' class="select-styled"></div>');

DEMO