复选框状态发生变化时如何防止页面跳转？

Posted 2023-03-27

【中文标题】复选框状态发生变化时如何防止页面跳转？

【英文标题】：How to prevent page jumps when checkbox's state changes?

【发布时间】：2015-01-10 07:47:53

【问题描述】：

Example page.

当您向下滚动页面直到您只能看到label 的一小部分（浅绿色/浅蓝色垂直矩形）时，然后单击label 以更改复选框的状态。然后您会看到页面跳起来以显示整个label。

如何防止跳转发生？我知道在 input 上设置 CSS display: none 是可行的，但这也会对屏幕阅读器隐藏 input 并且不利于辅助功能。

【问题讨论】：

这是设计使然。如果您通过标签单击，它将滚动以使标签可见。

@Raptor，是让input可见，而不是label。当input 设置为display: none 时，不会发生跳转。

@IanY。我觉得你的回答是对的。或可见性：隐藏。

看这个。使用可见性，元素仍将在文档中。 ***.com/a/17974351/4436090

【参考方案1】：

检查这个。使用可见性，元素仍会在文档中。

How can I prevent the browser from scrolling on top of the page when clicking the checkbox?

【讨论】：

感谢您的提示。我只想提供正确的答案。但是这个答案已经被接受了，无法删除，我现在该怎么办？

【参考方案2】：

完全理解您的顾虑，但我认为可以通过 display:none 来完成 - 借助 aria-label 或替代方法。

这有利于可访问性（以及 SEO，据我了解机器人逻辑）：

aria-label 属性用于定义一个标记当前元素的字符串。在文本标签不可见的情况下使用它 屏幕。 （如果有可见的文本标记元素，使用 aria-labelledby 代替。）

源代码：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

所以 - 你的小提琴（仅限 html）：

<div>
    <input  aria-label="test" id="test" type="checkbox" />
</div>

http://jsfiddle.net/fbogny68/

【讨论】：

谢谢。可以保留label吗？

请注意，仅现代浏览器支持 ARIA：caniuse.com/#feat=wai-aria