Question

我想实现一个特定的组合键（Ctrl + Alt +箭头键）来导航表格中的单元格。但我面临的问题是它与Jaws的表导航击键相冲突。

我已尝试过各种角色将事件放入我想用来启用导航的javascript中，但没有任何效果。

以下是代码片段：

<body>
    <button>test</button>

    <div class="wrapper">
        <table role="application" tabindex="0">
            <tr>
                <th tabindex="0">First Name</th>
                <th tabindex="0">Last Name</th>
                <th tabindex="0">Points</th>
            </tr>
            <tr>
                <td tabindex="0">somen</td>
                <td tabindex="0">Smith</td>
                <td tabindex="0">50</td>
            </tr>
            <tr>
                <td tabindex="0">Eve</td>
                <td tabindex="0">Jackson</td>
                <td tabindex="0">94</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $('body').on('keydown', function (event) {
            var code = event.keyCode || event.which;
            var ctrlAltPressed = event.ctrlKey === true && event.altKey === true;
            console.log('KEYDOWN: ' + code + ', ' + ctrlAltPressed);
        });
        $('body').on('keyup', function (event) {
            var code = event.keyCode || event.which;
            var ctrlAltPressed = event.ctrlKey === true && event.altKey === true;
            console.log('KEYUP: ' + code + ', ' + ctrlAltPressed);
        });
    </script>
</body>

当我按下“Ctrl + Alt +箭头键”时，我没有记录事件。

我在Windows 7上的Internet Explorer 11上使用Jaws 17.0.1010。我们将非常感谢您的帮助。

这是plunker link。

更新控制台应该给出：

37，true //按Ctrl + Alt + LEFT箭头

38，true //按Ctrl + Alt +向上箭头

39，true //按Ctrl + Alt + RIGHT箭头

40，true //按Ctrl + Alt +向下箭头

但是当按下任何箭头键以及Ctrl和Alt时，我现在是not getting anything logged。

Answer 1

仅使用与keydown事件一起传递的事件对象。无需外部库：

var editable = document.querySelector("#editable");
var keysPressed = document.querySelector("#keysPressed")
editable.onkeydown = function(event) {
  if ([event.ctrlKey, event.altKey, event.metaKey].includes(true) === true) {
    //Cancel what was supposed to happen if, Ctrl, Alt, or Meta (Start key or Search key) are detected
    event.preventDefault();
  }
  //Print the Associated Information With The Keydown Event
  keysPressed.innerHTML = `Key Pressed: ${event.key}<br />ctrlKey Pressed: ${event.ctrlKey}<br />altKey Pressed: ${event.altKey}<br />shiftKey Pressed: ${event.shiftKey}<br />metaKey Pressed: ${event.metaKey}`
};

#editable {
  border: 2px solid;
}

<div id="editable" contenteditable="true"></div>
<div id="keysPressed"></div>
<br />
<ol>
  <li>Simply start typing anything (Including Shortcuts) into the textbox (Content-Editable Div) and the information will appear below.</li>
  <li>For the purpose of this demo, most keyboard shorcuts will not have any effect within the textbox.</li>
  <li>Go ahead, try them!!!</li>
  <ul>
      <li>Copy, Cut, Paste</li>
      <li>Ctrl+S</li>
      <li>Ctrl+P</li>
      <li>Ctrl+Alt+Del</li>
  </ul>
</ol>

如何覆盖下巴屏幕阅读器keystoke

1 个答案: