最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Tab index not working in form - Stack Overflow

programmeradmin7浏览0评论

I have used this plugin:

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

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?

Share Improve this question asked May 8, 2014 at 18:14 Koala7Koala7 1,4148 gold badges43 silver badges88 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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 )

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

发布评论

评论列表(0)

  1. 暂无评论