javascript - 如何使用键盘快捷键与 div 交互?

标签 javascript jquery html css

是否可以使用键盘快捷键来操作 div,我正在开发一个与老年人一起使用的元素,他们不与鼠标交互,我可以使用键盘快捷键来单击 div 并打开其内容?

如何使用事件trigger只要按键被按下?

keydown = ctrl+g

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-3 col-sm-3 alert alert-danger"><a href="">Open ctrl+g or click</a></div>
  <div class="col-md-3 col-sm-3 alert alert-warning"><a href="">Open ctrl+d or click</a></div>
  <div class="col-md-3 col-sm-3 alert alert-success"><a href="">Open ctrl+e or click</a></div>
  <div class="col-md-3 col-sm-3 alert alert-info"><a href="">Open ctrl+i or click</a></div>
</div>
</div>

Can this impact browser shortcuts?

示例 ctrl+g 来自 google-chrome 的影响,不打开链接,打开到浏览器的搜索控制台

Or is there another form of accessibility use?

最佳答案

您可以简单地使用 keyup 事件并收听您想要的任何快捷方式。

$("#div").keyup(function(e){ 
  if(e.ctrlKey && e.key == 'g') { //could be anything 13 for example
    alert("this is test");
});

请注意我为 div 操作编写的这个事件处理程序,如果你想为整个页面添加你可以使用 $(document)

关于javascript - 如何使用键盘快捷键与 div 交互?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46966417/

相关文章:

jquery - Ajax/jQuery 链接未正确加载

javascript - jquery 1.12.4 超出最大调用堆栈大小

javascript - jQuery 附加选择选项 - 选择不起作用

javascript - 如何根据当前事件日期突出显示元素?

html - 强制 CSS 在响应式容器中生成正方形图像

javascript - 如何在angular js中单击按钮添加和删除文本字段

javascript - Unity 5.3.2 - 无法在检查器中使用 UI 文本对象

html - 在html中设置段落的左边距

javascript - 将 ngChange 附加到所有输入?

javascript - 将数据从指令传递回 Controller