Question

我使用过这个插件：http://codepen.io/wallaceerick/pen/ctsCz

自定义我网站上的所有选择标记，正如您所看到的那样select标记不可见且不显示，它们被div <div class="select-styled"></div>取代，其中选择了任何值插入选项。我喜欢这段代码的简单性，但我想让用户在填写表单时使用该选项卡。显然，在这种情况下，任何情况都是不可能的，因为隐藏了select标签，因此标签按钮会跳过它们。

我已在http://codepen.io/Mannaio/pen/ciFtv处复制了此案例，其中我在select标记之前和之后插入了一个输入，您可以看到标签按钮仅适用于inputs。所以我的问题是，我该如何解决这个问题呢？如何添加tabindex，让我也可以在表单中使用select？

Answer 1

在选择表单元素上添加显式tabindex属性，例如：

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

在你的脚本中，在$（'select'）。each（function（）{...

添加：

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

并修改插入样式化div版本的行，以包含tabindex属性以及使用tabIndex捕获的原始tabindex编号：

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

那可以给你你想要的东西。

（这是您的codepen页面的修订页面，其中包含它：http://codepen.io/anon/pen/rIeHd）

Answer 2

将第一项的索引设为1，如下所示：

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

在每个语句中添加一个计数器，如下所示：

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

将计数器+ 1添加到动态div的选项卡索引中，如下所示：

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

<强> DEMO

选项卡索引不在表单中

2 个答案: