如何在表單中將<span>元素設置爲常規制表位？

Question

我做它用作爲容器窗體控件（參見是低於/不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，在您希望製作「非標籤」的非錨點元素上。例如tabindex="0"。這樣，你不會混淆tab鍵順序，或者不得不在整個地方扔tabindex。

Answer 2

查找到HTML屬性tabindex。基本上，您應該可以通過Tab鍵在每個您想要關注的輸入上設置tabindex。開始第一個1，併爲每個輸入只計數。如果您還想通過選項卡鍵將對焦輸入設置爲tabindex至-1。