包含两个或三个单词的 HTML 访问键

Question

我正在使用访问键属性来按下按钮，就像accesskey="a"

但我想要这样：accesskey="a+b"

除了"a

"，我还想使用"a"和"b">

如何在 html 中使用多个词作为访问键？

Answer 1

根据规范的定义，访问键只能设置为单个可打印字符。

如果您希望多个键触发相同的操作，则可以创建一些其他元素并使用display:none隐藏它们，例如...

<a href="#" accesskey="a">A link</a>
<a href="#" accesskey="b" style="display:none"></a>

第二个链接是不可见的，但按下 B 的访问键组合将起作用。

Answer 2

你可以

用javascript来做到这一点。

<button onclick="console.log('save')" data-hotkey="Ctrl+S">Save</button>
<button onclick="console.log('print')" data-hotkey="Alt+P">Print</button>
<button onclick="console.log('debug')" data-hotkey="Ctrl+Alt+D">Debug</button>

<script>
  document.addEventListener("keydown", (keyboardEvent) => {
    // KeyboardEvent: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
    /* You can do some checking to end early for efficiency.
    if (!(keyboardEvent.ctrlKey || keyboardEvent.altKey)) {
      return
    }
     */
    [...document.querySelectorAll(`[data-hotkey]`)].forEach(elem => {
      const combineKey = elem.dataset.hotkey.split("+")
      // check
      for (let myKeyStr of combineKey) {
        myKeyStr = myKeyStr.toUpperCase()
        if (myKeyStr.length > 1) {
          if (myKeyStr === "CTRL" && keyboardEvent.ctrlKey) {
            continue
          }
          if (myKeyStr === "ALT" && keyboardEvent.altKey) {
            continue
          }
        }
        if (keyboardEvent.key.toUpperCase() !== myKeyStr) {
          return
        }
      }
      keyboardEvent.preventDefault() // prevent default behavior. For example: Ctrl+S will save (for OS:Windows)
      elem.click()
    })
  })
</script>