javascript - Tabindex 不适用于 div 元素打开模式

标签 javascript jquery html css twitter-bootstrap

我需要帮助来修复以下情况。

我有一个用图像包裹的 div。当我在 div 部分上单击鼠标时,将显示一个小工具提示模式以显示地址。 (想象这个例子在 map 上有数字,点击数字会弹出地址)。

为了与键盘导航具有相同的行为,我为 div 提供了 tabindex="0"。

现在我可以到达 div ,但是当我通过按 enter/空格键单击时,我无法查看工具提示模式。

按键事件也不起作用

任何人都可以帮助我解决问题的根本原因。一个例子会更容易理解更好

最佳答案

因为您可能正在使用默认情况下与 click 事件一起使用的工具提示插件,但您还需要 keyboards events使其与 enter/spacebar 一起工作。

现在,也许那个插件也支持它们,如果你能告诉我们我们会找到哪个 ;)

无论如何,一个通用的解决方案是

  • 将键盘事件附加到您的 div
  • 在用户按下回车键/空格键时捕获
  • 触发点击

试试这段代码:

$('#target').on('keyup', function(e){
    //13 = Enter key, 31 == Spacebar key
    if(e.keyCode == 13 || e.keyCode == 32) $(this).click();
})

请看这个例子:JSFIDDLE

关于javascript - Tabindex 不适用于 div 元素打开模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640238/

相关文章:

javascript - ng-view没有从href获取数据?

css - float DIVS - 一个无缘无故的重叠?

html - 无法从 npm 模块内联字体

javascript - 我如何知道应该在 NodeJS 中使用哪些参数

javascript - 在javascript中模拟按钮点击

javascript - 如何使客户端请求保持事件状态以延迟jsf中服务器的响应

jquery 将事件处理程序添加到数组中的对象

javascript - 使用 jquery 删除本地文件?

javascript - 通过第一列制作可扩展的表格 View 单元格

php - Javascript document.getElementById 连接