bootstrap 导航链接标签阻止了默认的浏览器行为,即使用Alt + 左/右箭头键,

58wvjzkj  于 5个月前  发布在  Bootstrap
关注(0)|答案(5)|浏览(71)

前提条件

描述问题

当具有 data-bs-toggle="tab" 的导航链接被聚焦时,后退和前进浏览器键盘快捷键(alt + 左/右箭头键)会被阻止。

  1. 有一个带有历史记录的浏览器标签页
  2. 访问 https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior
  3. 点击任何一个标签链接
  4. 当链接被聚焦时按住 alt + 左箭头键
    预期结果:
    浏览器标签页可以回到历史记录中。
    看到的结果:
    Bootstrap 标签控制处理了 keydown 事件并阻止了浏览器回到历史记录中。

简化的测试用例

https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior

你在哪一个操作系统上看到了这个问题?

Windows

你在哪一个浏览器上看到了这个问题?

Chrome, Firefox, Microsoft Edge, Opera

你使用的Bootstrap版本是什么?

v5.2.3

o4tp2gmn

o4tp2gmn1#

嘿,我想处理这个问题。请把它分配给我。

lxkprmvk

lxkprmvk2#

我愿意在@augustas-alminas上工作。你能把这个任务分配给我吗?

rqenqsqc

rqenqsqc3#

我们不分配问题。请阅读我们的contributing guidelines
关于这个问题,我想我们需要检查箭头是否与另一个键配对使用,因为目前alt + 的效果与单独使用相同。
顺便说一下,这可能适用于任何其他具有键盘导航功能的组件。

ssm49v7z

ssm49v7z4#

感谢您指出这个问题。我能够在不同的浏览器和操作系统上重现描述的问题。看起来带有data-bs-toggle="tab"属性的导航链接标签阻止了使用alt + 左/右箭头键的默认浏览器行为,这是浏览历史记录的预期行为。
一个可能的解决方案是在nav-link标签的keydown事件监听器中添加一个条件,检查是否按下了alt键,如果按下了,则允许继续执行默认的浏览器行为。另一个选择是提供一种方法,让用户在希望的情况下禁用此行为。

gpnt7bae

gpnt7bae5#

我认为这不是一个问题或错误。我只是在我的设备上检查了组件是如何工作的,我发现组合键alt + 箭头与单独的箭头一样有效,而在我看来,当你点击一次后,条形图不应该带你回到初始选项卡,因为它会立即返回历史记录,这是不方便的。另一方面,如果组合键alt + 箭头的行为与单独的箭头不同,那就更好了,那就是允许在按住alt + 箭头的同时进行导航,当你释放alt按钮时,它将返回历史记录。

相关问题