Html 你如何使一个div“可选项卡”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13637223/
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 you make a div "tabbable"?
提问by TheBoss
I have buttons that are div elements and I want to make them so that it is possible for the user to press the tab key on their keyboard and move between them. I've tried wrapping their text in anchor tags but it doesn't seem to work.
我有一些按钮是 div 元素，我想制作它们，以便用户可以按下键盘上的 Tab 键并在它们之间移动。我试过用锚标签包装他们的文本，但它似乎不起作用。
Does anyone have a solution?
有没有人有办法解决吗？
回答by Neps
Add tabindexattributes to your divelements.
tabindex为div元素添加属性。
Example:
例子：
<div tabindex="1">First</div>
<div tabindex="2">Second</div>
Per steveax's comment, if you don't want the tab order to deviate from where the element is in the page, set the tabindexto 0:
根据 steveax 的评论，如果您不希望 Tab 键顺序偏离元素在页面中的位置，请将 设置tabindex为0：
<div tabindex="0">First</div>
<div tabindex="0">Second</div>
回答by AwokeKnowing
for those interested, in addition to the accepted answer, you can add the following jquery to make the div style change when you tab to it, and also handle Enter and Space to trigger a click (then your click handler will do the rest)
对于那些感兴趣的人，除了接受的答案之外，您还可以添加以下 jquery 以在您使用 Tab 键时更改 div 样式，并处理 Enter 和 Space 以触发点击（然后您的点击处理程序将完成其余的工作）
$(document).on('focus', '.button',function(){
$(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
if(e.which==13 || e.which==32)
$(this).click()
});
I'm sure someone has made this into a jq plugin $().makeTabStop
我敢肯定有人已经把它变成了一个 jq 插件 $().makeTabStop
回答by Ronnie Royston
Add the tabindex="0"attribute to each div you want tabbable. Then use CSS pseudo classes :hover and :focus, for example to signify to the app user that the div is in focus and clickable, for example. Use JavaScript to handle the click.
将tabindex="0"属性添加到您想要 tabbable 的每个 div。然后使用 CSS 伪类 :hover 和 :focus，例如向应用程序用户表示 div 处于焦点且可点击。使用 JavaScript 处理点击。
var doc = document;
var providers = doc.getElementsByClassName("provider");
for (var i = 0; i < providers.length; i++) {
providers[i].onclick = function() {
console.log(this.innerHTML);
};
}.provider {
flex: 0 1 auto;
align-self: auto;
width: 256px;
height: 48px;
margin-top: 12px;
margin-right: 12px;
text-align: center;
line-height: 48px;
text-transform: uppercase;
background-size: contain;
background-repeat: no-repeat;
background-position: 10%;
background-color: gray;
}
.provider:hover{
cursor: pointer;
}
.provider:focus{
-webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>回答by b_laoshi
Make elements tabbable and clickable with key press using jquery
使用 jquery 通过按键使元素可选项卡和可点击
Assumptions
假设
- All elements that are of a non-tabbable, non-clickable type and should be clickable have an onclickattribute (this could be changed to a class or other attribute)
- All elements are of the same type; I will use divs.
- You're using jquery
- 所有不可标签、不可点击类型且应该可点击的元素都有一个onclick属性（这可以更改为类或其他属性）
- 所有元素都属于同一类型；我将使用 div。
- 你正在使用 jquery
Sample html:
示例 html：
...
<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>
...
Jquery code: This is the code that will run when the page has loaded. It needs to run on your HTML page.
Jquery 代码：这是页面加载后将运行的代码。它需要在您的 HTML 页面上运行。
$(()=>{
// make divs with an onclick attribute tabbable/clickable
$('div[onclick]')
.attr('tabindex', '0') // Add tab indexes
.keypress((evt)=>{
var key = evt.key;
evt.preventDefault(); // Ensure all default keypress
// actions are not used
if (key === ' ' || key === 'Enter') { // Only send click events for Space
// or Enter keys
evt.currentTarget.click(); // Run the click event for element
}
});
});
You can find a working example here.
你可以在这里找到一个工作示例。
