代码之家 › 专栏 › 技术社区 › Sheppard25

为什么按下Tab键后onBlur会触发onKeyDown?

accessibility reactjs javascript

Sheppard25 · 技术社区 · 2 年前

我有个奇怪的问题。我想使页面可访问,键盘友好。我想通过Tab键在项目之间切换,然后按空格或Enter键。但当我为Material UI按钮添加onKeyDown事件时,回调不会在按钮按下时运行,而是在我切换到另一个元素后运行。对我来说,它看起来像一只虫子。

https://codesandbox.io/s/thirsty-tdd-xyjt8y

 <Stack spacing={2} direction="row">
  <Button variant="text" onKeyDown={() => { console.log("fooo") }}>Text</Button> 
  <Button variant="contained">Contained</Button> // foo is displayed when focus jumps to this element
  <Button variant="outlined">Outlined</Button>
</Stack>

0 回复 | 直到 2 年前

slugolicious 2 年前

当按下按钮时,回调不会运行,而是在我切换到另一个元素之后

我看不出你有这种行为。我甚至在您的示例中添加了onBlur()和onFocus()处理程序。

<Button variant="text" onKeyDown={() => { console.log("keydown") }} onFocus={() => { console.log("focus") }} onBlur={() => { console.log("blur") }}>Text</Button>

当我 选项卡 到 “文本”按钮,我在控制台中看到“焦点”。

当我 选项卡 关 “文本”按钮,我看到控制台中的“keydown”后面跟着“blur”。

“keydown”事件被触发是因为我按下了一个键盘键( 选项卡 键)。触发“模糊”事件是因为“文本”按钮失去焦点(因为我按下了 选项卡 )。

推荐文章

Shtole · 我需要为<button>中的装饰性<svg>隐藏aria吗?

1 年前

gallium314 · 我应该使用什么HTML语义来访问自定义计算器的输出?

1 年前

Sheppard25 · 为什么按下Tab键后onBlur会触发onKeyDown?

2 年前

user2933998 · 通过程序更改动态文本,而不必转到“设置”

2 年前

Betulino · 一行中的多个表单字段是否具有良好的可访问性?

2 年前

Takeshi Tokugawa YD · 如何获取“pa11y”中的目标行号和列范围?

2 年前

Yoginath Sumanth · 如何解决PageSpeed Insights诊断可访问性的性能问题部分打问号

3 年前

GurpusMaximus · 如何使用Java PDFBox 2.0.8库创建可访问的PDF,该库也可以使用PAC 2工具进行验证?

8 年前

David Costa · 如何以编程方式在主屏幕之间滚动?

8 年前

Ian Boyd · 如何设置与TEdit控件关联的可访问名称?

8 年前