HTML5 自动对焦在单页网站上丢失

我想知道有人对这个困境有答案吗？当在一个不在页面登陆部分的输入元素上设置了自动对焦时，当用户点击菜单标签进入该部分时，自动对焦就会丢失。 (例如，可能有表格的联系部分)...

最佳答案

autofocus attribute -



旨在提示用户代理在页面加载时将初始焦点放在表单字段上，与以前基于 JavaScript 的解决方案相比，辅助技术的用户提供更少的“不和谐”和更可控的体验——这通常是在用户“偷”焦点之后已经开始浏览文档。

在您的情况下使用此属性的问题有两个方面-

页面加载事件只会触发一次，当您将焦点移动到同一文档内部的新“页面”时不会再次触发

在同一个文档中包含多个元素是无效的 - 在这种情况下是整个单页文档 - 具有 autofocus 元素。

您需要做的是在新视口(viewport)区域内对您确定的表单元素使用 native JavaScript focus method。

如果您有对新“页面”元素或容器的引用，您可以使用类或数据属性通过 querySelector method 或 jQuery 来指定所需的元素。

就像是-

var firstElement = pageContainer.querySelector('.focus-field');

if (firstElement) {
    firstElement.focus();
}

或者，您可以简单地使用元素选择器来选择第一个表单元素-

var firstElement = pageContainer.querySelector('input, select');

if (firstElement) {
    firstElement.focus();
}

请注意，在这种情况下，聚焦隐藏输入是无效的(希望是显而易见的原因)，并且如果您希望使用此解决方案，最好使用 querySelectorAll method 并循环检查 - 检查类型是否未隐藏和破坏在第一个要聚焦的有效元素上退出循环。或者简单地使用属性选择器并只选择文本类型的输入。

如果您使用 jQuery，您可以使用 not function 从所选元素中排除隐藏的输入。

关于HTML5 自动对焦在单页网站上丢失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25723145/