将焦点集中在 table 的一栏中

Question

<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，它应该从上到下。
我基本上想跳过对'dont focus'-按钮的关注

我该怎么做？

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>

Answer 2

tabindex 属性指定元素的跳格顺序（当 "tab" 按钮用于导航时）。分配 negative 值将使其无法聚焦。

这样试试：

  <tr>  
    <th><button tabindex="-1">dont focus</button></th>
    <th><button tabindex="1">focus</button></th>
  </tr>
  <tr>
    <th><button  tabindex="-1">dont focus</button></th>
    <th><button tabindex="2">focus</button><button>also focus</button></th>
  </tr>

Working Demo

将焦点集中在 table 的一栏中

keep focus in one column of table

html

javascript

focus

angular