如何通过accesskey激活单选按钮组并使其获得焦点？

我有两个可通过accesskey选中的fieldset，每个fieldset包含表格（已简化）。选中第二个fieldset时，第一个单选按钮会被选中，能用方向键切换选项；按下复选框对应的accesskey可以切换复选框状态。但按下单选按钮组对应的accesskey（o，对应“Modus”标签）时，单选按钮并未获得焦点，没法直接用方向键选择选项。

操作说明 #

• s：选中第一个fieldset
• u：选中第二个fieldset
• o：选中“Modus”标签（目标是触发单选按钮组聚焦）
• i：选中“Einschränkungen”标签（对应复选框行）
• 单选按钮各自的accesskey：t、f、x、l、z、r、p

原代码 #

CSS

label {
  font-family: sans-serif;
  font-weight: bolder
}

.sf-legend {
  font-size: medium;
  font-family: sans-serif
}

.sf-lab {
  font-family: sans-serif;
  font-weight: bolder
}

.sf-help {
  font-family: sans-serif;
  font-size: small;
  color: #3333bb
}

div.vsp {
  height: 1em
}

HTML

<div class="vsp" name="vsp-big"></div>
<form method="post" action="/directory/94676003/query/2" enctype="multipart/form-data" class="sf">
  <fieldset class="sf-fset">
    <legend class="sf-legend" accesskey="s" data-i="0">Suchkriterien</legend>
    <p class="sf-help">Alle angegebenen Suchkriterien müssen für einen Treffer erfüllt sein.</p>
  </fieldset>
  <div class="vsp"></div>
  <fieldset class="sf-fset">
    <legend accesskey="u" data-i="1" class="sf-legend">Suchmodus</legend>
    <p class="sf-help">Modus: Was soll ausgegeben werden?</p>
    <table summary="Suchmodus" class="sf">
      <tbody>
        <tr>
          <td>
            <label data-i="1" accesskey="o" class="sf-lab" for="srch-mode">Modus</label>
          </td>
          <td>
            <label><input type="radio" name="srch-mode" value="telephoneNumber" checked="checked"  data-i="0" accesskey="t" id="srch-mode-telephoneNumber" title="telephoneNumber"/>Telefon</label>
            <label><input type="radio" name="srch-mode" value="pager"  accesskey="f" data-i="0" id="srch-mode-pager" title="pager"/>Funk</label>
            <label><input type="radio" name="srch-mode" value="facsimileTelephoneNumber"  accesskey="x" data-i="2" id="srch-mode-facsimileTelephoneNumber" title="facsimileTelephoneNumber"/>FAX-Nummer</label>
            <label><input type="radio" name="srch-mode" value="mail"  title="mail" data-i="5" accesskey="l" id="srch-mode-mail"/>E-Mail Adresse</label>
            <label><input type="radio" name="srch-mode" value="uid"  title="uid" data-i="5" accesskey="z" id="srch-mode-uid"/>Benutzerkennung</label>
            <label><input type="radio" name="srch-mode" value="mobile"  data-i="17" accesskey="r" id="srch-mode-mobile" title="mobile"/>Mobiltelefonnummer</label>
            <label><input type="radio" name="srch-mode" value="homePhone"  title="homePhone" data-i="0" id="srch-mode-homePhone" accesskey="p"/>Private Telefonnummer</label>
          </td>
        </tr>
        <tr>
          <td><label for="srch-need" accesskey="i" data-i="1" class="sf-lab">Einschränkungen</label></td>
          <td>
            <label><input type="checkbox" name="srch-need" value="not-null" checked="checked"  id="srch-need" data-i="7" accesskey="g"/>Einträge ohne Angaben unterdrücken</label>
          </td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <div class="vsp" name="vsp-big"></div>
  <label for="submit" accesskey="c" data-i="2" class="sf-lab"><input type="submit" name=".submit" value="Suchen" id="submit" /></label>
</form>

解决方案 #

问题根源：

1. “Modus”标签的for属性指向了不存在的id="srch-mode"，无法正确关联单选按钮组；
2. 即使标签关联正确，HTML默认行为也不会在触发标签时自动将焦点设置到单选按钮上。

实现步骤

1. 移除“Modus”标签无效的for属性，给标签设置唯一id用于绑定事件；
2. 通过JavaScript监听标签的点击和accesskey触发事件，手动将焦点设置到当前选中的单选按钮上。

修改后的代码

HTML（仅修改“Modus”标签部分）

<label data-i="1" accesskey="o" class="sf-lab" id="modus-label">Modus</label>

JavaScript

// 获取Modus标签元素
const modusLabel = document.getElementById('modus-label');

// 监听点击事件，聚焦到选中的单选按钮
modusLabel.addEventListener('click', () => {
  const checkedRadio = document.querySelector('input[name="srch-mode"]:checked');
  if (checkedRadio) {
    checkedRadio.focus();
  }
});

// 额外监听keydown事件，确保accesskey触发时也能聚焦
modusLabel.addEventListener('keydown', (e) => {
  const checkedRadio = document.querySelector('input[name="srch-mode"]:checked');
  if (checkedRadio) {
    checkedRadio.focus();
  }
});

这样，当按下o触发“Modus”标签时，当前选中的单选按钮会自动获得焦点，就能直接用方向键切换选项了。

内容的提问来源于stack exchange，提问作者U. Windl