如何在表单中将<span>元素设置为常规制表位？

Question

我制作了一个用作容器的表单控件(参见下面的Yes/No toggler)

这是代码:

<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);

Answer 1

尝试将tabindex设置为0,在您想要制作"tabbable"的非锚元素上.例如tabindex="0".这样,你就不会搞乱标签顺序,或者必须在整个地方抛出tabindex.