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

Question

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

Answer 1

autofocus attribute -

lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.

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

在你的案例中使用这个属性的问题有两个——

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

2. 在同一文档中有多个元素是无效的 - 在这种情况下是您的整个单页文档 - 具有自动对焦元素。

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

如果您有对新“页面”元素或容器的引用，您可以使用类或数据属性通过使用 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从所选元素中排除隐藏的输入。