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

Question

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

Answer 1

允许您指定表单控件在页面加载时应具有输入焦点,除非用户覆盖它,例如通过键入其他控件.文档中只有一个表单元素可以具有自动聚焦属性,即布尔值.

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

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

您需要做的是在新视口区域中对确定的表单元素使用本机JavaScript焦点方法.

如果您有对新"page"元素或容器的引用,则可以使用class或data-attribute通过使用querySelector方法或jQuery 指定所需的元素.

就像是-

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

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

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

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

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

请注意,在这种情况下,聚焦隐藏输入是无效的(出于明显的原因),如果您希望使用此解决方案,最好使用querySelectorAll方法并循环执行 - 检查类型是否未隐藏,在要聚焦的第一个有效元素上突破循环.或者只是使用属性选择器,只选择文本类型的输入.

如果您使用的是jQuery,则可以使用not函数从所选元素中排除隐藏的输入.