javascript 如何使 <span> 元素成为表单中的常规制表位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26154128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a <span> element a regular tab stop within a form?
提问by mydoglixu
I made a form control which uses as its container (see the Yes/No toggler below)
我制作了一个用作其容器的表单控件（请参阅下面的“是/否”切换器）
Here's the code for that:
这是代码：
<span class="toggle">
<i>Yes</i>
<i>No</i>
<input type="hidden" name="toggle-value" value="0">
</span>
My CSS isn't relevant to the question, but it's included for comprehension of my control:
我的 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 */
and the JS that makes it all work:
以及让这一切正常运行的 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();
}
}
The problem isthat I'm using this all over my application for data-entry. Have you ever wanted to NOT use the mouse when you're entering a lot of data? Yeah, me too. So you hit TAB and a toggle like this should respond to the spacebar. But instead, since it's just a element, it is skipped altogether.
问题是我在整个应用程序中都使用它来进行数据输入。您是否曾经想在输入大量数据时不使用鼠标？我也是。所以你点击 TAB 和这样的切换应该响应空格键。但是，因为它只是一个元素，所以它被完全跳过了。
I'm hoping someone can help me solve the question of "how the heck do I make this a tab stop AND be in the correct order"?
我希望有人可以帮助我解决“我到底如何将其设为制表位并按正确顺序排列”的问题？
============== EDIT: HERE IS MY UPDATED JQUERY CODE CONTAINING THE SOLUTION:
============== 编辑：这是我更新的包含解决方案的 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);
回答by bruh
Try setting your tabindex to 0, on the non-anchor elements you would like to make "tabbable". For example tabindex="0". This way, you won't mess with the tabbing order, or have to throw tabindexs all over the place.
尝试将 tabindex 设置为 0，将非锚元素设置为“可制表”。例如tabindex="0"。这样，您就不会弄乱 Tab 键顺序，也不会到处乱扔 tabindex。
回答by Adam Merrifield
Look into the html attribute tabindex. Basically you should be able to set tabindexon each input you want to focusable via the tab key. Start the first one a 1and just count upwards for each input. If you also want to take an input out of focusing via the tab key set the tabindexto -1.
查看 html 属性tabindex。基本上，您应该能够tabindex通过 Tab 键设置要聚焦的每个输入。开始第一个 a1并为每个输入向上计数。如果您还想通过 Tab 键将输入从聚焦中设置tabindex为-1。
