我有一些按钮,它们是div元素,因此我想使它们成为可能,以便用户可以按键盘上的Tab键并在它们之间移动。我试过将他们的文本包装在锚标记中,但似乎不起作用。
有没有人有办法解决吗?
我有一些按钮,它们是div元素,因此我想使它们成为可能,以便用户可以按键盘上的Tab键并在它们之间移动。我试过将他们的文本包装在锚标记中,但似乎不起作用。
有没有人有办法解决吗?
href
属性,则它应该起作用。除非可激活的项目实际执行了某项操作,否则标记的正确使用可能是正确的,也可能不是正确的。
Answers:
tabindex
向您的div
元素添加属性。
例:
<div tabindex="1">First</div>
<div tabindex="2">Second</div>
根据Steveax的评论,如果您不希望Tab键顺序偏离页面中元素的位置,请将设置tabindex
为0
:
<div tabindex="0">First</div>
<div tabindex="0">Second</div>
tabindex=0
以免破坏自然的制表顺序。
对于那些感兴趣的人,除了可以接受的答案之外,您还可以添加以下jquery以在切换到div时更改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()
});
我确定有人已经将其放入jq插件$()。makeTabStop
将tabindex="0"
属性添加到您希望可选项的每个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>
假设条件
范例html:
...
<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>
...
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
}
});
});
您可以在此处找到一个有效的示例。