Html div 上的标签索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3059203/
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
Tab Index on div
提问by Mithun Sreedharan
Please see the form HTML code below
请参阅下面的表单 HTML 代码
<form method="post" action="register">
<div class="email">
Email <input type="text" tabindex="1" id="email" value="" name="email"> </div>
</div>
<div class="agreement">
<div tabindex="2" class="terms_radio">
<div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
<input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
</div>
</div>
</div>
<div class="form_submit">
<input type="button" tabindex="3" value="Cancel" name="cancel">
<input type="submit" tabindex="4" value="Submit" name="submit">
</div>
</form>
Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.
在这里，我将协议复选框的样式设置为完全隐藏无线电输入并将背景图像应用于包装器 div，并且包装器 div 的 onclick 将切换背景图像以及无线电输入的选中状态。
I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,
我需要在 'terms_radio' DIV 上设置 tabindex 索引，只是 div 上的 tabindex="2" 属性不起作用，
Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?
当光标位于电子邮件输入字段时，是否可以在按 TAB 时将无线电输入标签上的虚线边框向上显示？
采纳答案by antz29
DIV elements are not compatible with tabindex in HTML4).
DIV 元素与HTML4 中的tabindex 不兼容）。
(NOTEHTML 5 spec doesallow this, however, and it commonly works regardless)
（然而，注意HTML 5 规范确实允许这样做，并且无论如何它通常都有效）
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
以下元素支持 tabindex 属性：A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA。
Essentially anything you would expect to be able to hold focus; form elements, links, etc.
基本上任何你希望能够保持焦点的东西；表单元素、链接等。
What I think you probably want to do here is use a bit of JS (I would recommend jQueryfor something relatively painless) to bind to the focus event on the input element and set border on the parent div.
我认为你可能想要在这里做的是使用一些 JS（我会推荐jQuery来做一些相对轻松的事情）来绑定到输入元素上的焦点事件并在父 div 上设置边框。
Stick this at the bottom of your body tag to grab jQuery from the Google CDN:
将其粘贴在 body 标签的底部以从 Google CDN 中获取 jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Then something like this would probably do the trick:
那么这样的事情可能会成功：
$(function() {
$('div.radio input').bind({
focus : function() {
$(this).closest('div.radio').css('border','1px dotted #000');
},
blur : function() {
$(this).closest('div.radio').css('border','none');
}
});
});
回答by hdf54d56
Yes! There is a spec for it, its called WAI-ARIA and its for accessibility : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between
是的！它有一个规范，称为 WAI-ARIA 及其可访问性：https: //www.w3.org/TR/wai-aria-practices/#kbd_general_between
回答by Poshan Bastola
You could simply change the tabindex value from 2 to 0.
您可以简单地将 tabindex 值从 2 更改为 0。
<div tabindex="0" class="terms_radio">
<div tabindex="0" class="terms_radio">
This provides the default focus state that goes with the flow of your code.
这提供了与代码流相伴的默认焦点状态。
回答by StackExploded
You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use
您可以为单选元素设置 tabindex="2" 并隐藏单选元素（不是使用 display:none，而是使用 z-index，以便它保持可选项卡）。当您在电子邮件输入字段上按 Tab 键时，收音机会获得焦点，您可以使用
input:focus+label {}
to style the label
设置标签样式
回答by Code Spy
$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
if (e.keyCode == 9) {
if (e.shiftKey) {
//Focus previous input
if (thisTab == startIndex) {
$("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
return false;
}
} else {
if (thisTab == lastIndex) {
$("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
return false;
}
}
}
});
var setTabindexLimit = function(x, fancyID) {
console.log(x);
startIndex = 1;
lastIndex = x;
tabLimitInID = fancyID;
$("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
}
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});
setTabindexLimit()function two attribute 10which is last Tabindex in Div and Selector_With_Where_Tab_Index_You_Wantis the class or ID of div In which you want tabindexto repeat.
setTabindexLimit()函数两个属性10是 Div 中的最后一个 Tabindex 和Selector_With_Where_Tab_Index_You_Want是要在其中重复 tabindex 的 div 的类或 ID。
