javascript - 将焦点保持在表格的一列中

Question

这是我的 STACKBLITZ

<table class="example-focus-monitor" cdkTrapFocus>
  <tr>  
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
</table>

• 我只想将焦点保留在右列上。所以如果我一直按 Tab 键，它应该从上到下。
• 我基本上想跳过“不聚焦”按钮的焦点

我该怎么做？

Answer 1

您可以使用tabindex='-1' 。负值表示无法通过顺序键盘导航访问该元素。

<p>my Table</p>
<table class="example-focus-monitor" cdkTrapFocus>
  <tr>  
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button tabIndex='-1'>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
</table>

<button>should never be focused when using tab and focus inside table</button>