Javascript 如何制作<；span>；元素是表单中的常规制表位吗？

我制作了一个表单控件，用作其容器（请参见下面的“是/否”切换程序）

下面是代码：

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

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

---

查看html属性。基本上，您应该能够通过tab键对每个要聚焦的输入设置

tabindex

。从a

1

开始第一个输入，然后对每个输入向上计数。如果您还想通过tab键将输入从对焦中取出，请将

tabindex

设置为

-1

尝试将tabindex设置为0，以使非锚点元素成为“tabbable”。例如

tabindex=“0”

。这样，您就不会弄乱tab顺序，或者必须到处抛出tabindexs。

查看html属性这是我目前知道的唯一方法，但我遇到的问题是，其他表单控件都没有显式设置tabindex，因此，当我设置tabindexs时，这一切都是无序的。另外，我正试图在toggle对象本身中实现这一点，这样它就不必依赖于在其他每个表单控件上手动设置tabindex——这是一个大型数据库站点，这将是一个非常好的选择nightmare@mydoglixu对的我的建议是设置所有输入的

tabindex

s。我在上面编辑了我的评论以解决这个问题-它必须以某种方式仅通过切换控件进行设置，不可能返回并设置所有输入，如that@mydoglixu在这种情况下，我建议不要使用span+a隐藏输入字段，而是使用单选按钮样式。这样，每个名字只会有一个标签。另一个注意事项是，由于控件使用了空格，我需要防止浏览器向下滚动，因此我在其中添加了preventDefault（）函数。请注意，您需要捕获

span

元素上的键事件（空格键）以使其按需反应。

$('.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);