javascript 标签索引在表单中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23549507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tab index not working in form
提问by Koala7
I have used this plugin: http://codepen.io/wallaceerick/pen/ctsCz
我用过这个插件：http: //codepen.io/wallaceerick/pen/ctsCz
to customize all the select tag in my website, as you can see in this way the selecttags 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 selecttags are hidden so they are skipped by the tab button.
自定义我网站中的所有选择标签，正如您以这种方式看到的，select标签不可见且不显示，它们被替换为 div <div class="select-styled"></div>，其中插入了该选项的任何选定值。我喜欢这段代码的简单性，但我想让用户在填写表单时可以使用该选项卡。显然，在这种情况下，这是不可能的，因为select标签是隐藏的，所以它们会被选项卡按钮跳过。
I have reproduced the case here http://codepen.io/Mannaio/pen/ciFtvwhere i have inserted an input before and after the selecttags 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 tabindexwhich let me also using the selectin the form?
我在这里复制了这个案例http://codepen.io/Mannaio/pen/ciFtv我在select标签前后插入了一个输入，你可以看到标签按钮只在inputs. 所以我的问题是，我该如何解决这个问题？我如何添加tabindex让我也可以select在表单中使用的？
回答by redlena
Put explicit tabindex attributes on your select form elements, such as:
将显式 tabindex 属性放在您选择的表单元素上，例如：
<select id="mounth" tabindex="2">
In your script, in the $('select').each(function(){...
在您的脚本中，在 $('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:
并修改您插入样式化 div 版本的行，以包含 tabindex 属性以及您使用 tabIndex 捕获的原始 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)
（这是您的 codepen 页面的修订页面，它正在运行：http://codepen.io/anon/pen/rIeHd ）
回答by 13ruce1337
Give the first item an index of 1 like so:
给第一项的索引为 1，如下所示：
<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:
将 counter+1 添加到动态 div 的标签索引中，如下所示：
$this.after('<div tabindex='+(i+1)+' class="select-styled"></div>');
