如何禁用标签箭头键导航材料UI ReactJS?



我使用ReactJS材料UI选项卡导航。我想禁用材质界面中选项卡的方向键导航

我想要的是使用Tab键导航,然后按Enter键后,它应该在两个<Tabs>之间的选项卡下打开页面。

然后在输入后,它应该在该选项卡页面中使用tab键导航焦点。

这是否可以实现?我该怎么做呢?

正如@foramkumar-patel正确指出的那样,完全禁用箭头键行为是不可能的。

但是你仍然可以添加tab键导航。

你所需要做的就是像这样添加tabIndex属性:

<Tab tabIndex={0} label="My tab" />

下面是一个工作示例:https://codesandbox.io/s/basictabs-material-demo-forked-wzs4o?file=/demo.js

按Tab键向前移动,但在最后一个Tab将移动到页面上的下一个表元素。按Shift+Tab键移动到上一个选项卡,并将第一个选项卡移到上一个表元素。

有关tabindex属性的更多信息,您可以查看这里:https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

注意:键盘导航(箭头键或标签)不工作在Safari macOS

Material UI不提供用tab键代替箭头键进行导航的功能。

你可以用箭头键禁用导航但仍然可以用箭头键聚焦

你可以检查=>https://mui.com/components/tabs/heading-keyboard-navigation

最新更新