Question

是否可以使用键盘快捷键来操作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>

这会影响浏览器快捷方式吗？

来自Google Chrome的示例ctrl+g影响，未打开链接，打开浏览器的搜索控制台

或者是否存在其他形式的辅助功能？

Answer 1

您可以使用keyup事件：

$(function() {
  $(document).on('keyup', function(e) {
    if (e.ctrlKey && e.key == 'g') {
      e.preventDefault();
      var $output = $('<span/>').text('You typed ctrl+g.');
      $('body').append($output).append('<br/>');
    }
  });
});

至于干扰浏览器键盘快捷键 - 在某些情况下这是可能的。您可以围绕它设计快捷方式（Ctrl+Shift等）。

对于您的使用案例，您只需替换if (e.ctrlKey && e.key == 'g') {...}中的代码即可选择相应的<div>并展开它。

Answer 2

你可以简单地使用keyup事件并听取你想要的任何捷径。

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

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

如何使用键盘快捷键与div进行交互？

2 个答案: