如何在表单中将<span>元素设置为常规选项卡停靠点？

Question

我制作了一个表单控件，它使用 <label> 作为其容器（请参见下面的 Yes/No 开关）

以下是该控件的代码：

<span class="toggle">
    <i>Yes</i>
    <i>No</i>
    <input type="hidden" name="toggle-value" value="0">
</span>

我的CSS与问题无关，但为了让我控制更易于理解，它已经包含在内：

.toggle { width:auto; height: 20px; display: inline-block; position: relative;  cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }  
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1;  background-color: #fff; } /* circle */

还有让所有这些工作的JS代码：

.on('click', '.toggle', function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}

问题在于，我在整个应用程序中都在使用它进行数据输入。你有没有想过在输入大量数据时不使用鼠标？是的，我也是这样想的。所以你按TAB键，应该用空格键响应像这样的切换。但是，由于它只是一个元素，因此它被完全跳过了。

我希望有人能帮助我解决“我该如何使其成为制表符停止位并且按正确顺序排列”的问题？

============== 编辑：这是我的更新后的jQuery代码，包含解决方案：

$('.toggle').click(function(){
    var input = $(this).next('input');
        if(input.val() == 1) {
            $(this).removeClass('on').addClass('off');
            input.val(0).change();
        } else {
            $(this).removeClass('off').addClass('on');
            input.val(1).change();
        }
}).focus(function() {
    $(this).bind('keydown', 'space', function(e){
        $(this).trigger('click')
        e.preventDefault();
    });

}).blur(function() {
    $(this).unbind('keydown');

}).attr('tabIndex', 0);

- mydoglixu

---

请查看HTML属性tabindex。 - Adam Merrifield

Answer 1

尝试将非锚点元素的tabindex设置为0，以使其可以 "tabbable"。例如tabindex="0"。这样一来，您就不会干扰tab键顺序，或者不得不将tabindex散布在各处。

- bruh

---

关于这个问题，我再补充一点，因为控件使用了空格键（SPACE），所以我需要添加 preventDefault() 函数来阻止浏览器滚动。 - mydoglixu

请注意，您需要在“span”元素上捕获关键事件（空格键），以使其按照您的要求做出反应。 - Avatar

Answer 2

查看HTML属性tabindex。基本上，您应该能够在每个要通过Tab键聚焦的输入上设置tabindex。将第一个设置为1，并逐个计数每个输入。如果您还想通过Tab键取消对某个输入的聚焦，请将tabindex设置为-1。

- Adam Merrifield

---

这是目前我知道的唯一方法，但我遇到的问题是，其他表单控件没有明确设置tabindex，因此当我设置我的<span tabindex="n">时，它们都是无序的。此外，我正在尝试在切换对象本身中完成此操作，以便它不需要依赖于手动在每个其他表单控件上设置tabindex-这是一个大型数据库网站，那将是一个噩梦。 - mydoglixu

@mydoglixu 正确，我的建议是设置所有输入的tabindex。 - Adam Merrifield

我编辑了我的上面的评论来解决这个问题 - 它必须通过切换控件进行设置，不可能回去设置所有的输入。 - mydoglixu

在这种情况下，我建议使用样式化的单选按钮，而不是使用 span + 隐藏输入字段。这样它每个名称只会有一个被选中。演示 - Adam Merrifield