我使用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