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

Question

我想知道是否有人能解决这个难题？如果在输入元素上设置了自动对焦，该输入元素不在页面的着陆部分中，则当用户单击菜单标记以转到该部分时，自动对焦将丢失。 （例如，可能有表格的联系部分）......

Answer 1

autofocus attribute -

  

允许您指定表单控件的输入焦点时   页面加载，除非用户覆盖它，例如键入a   不同的控制。 文档中只有一个表单元素可以拥有   autofocus属性，这是一个布尔值。

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

在您的案例中使用此属性的问题有两个 -

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

2. 在同一文档中有多个元素是无效的 - 在本例中是整个单页文档 - 它具有自动对焦元素。

您需要做的是在新视口区域内使用您的决定的表单元素上的native JavaScript focus method。

如果您引用了新的“page”元素或容器，则可以使用class或data-attribute通过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排除所选元素的隐藏输入。