forms - 将焦点设置为使用 HTML5 自动对焦的不可见表单控件吗？

Question

autofocus="autofocus"如标题所述：即使使用display: none;or隐藏表单控件，焦点仍将设置在表单控件上visibility: hidden;吗？

Answer 1

如果您的问题是隐藏字段是否可以从可见字段中窃取自动对焦，答案是否定的。

具有autofocus属性的隐藏字段在可见时获得焦点。

这是一个jsFiddle，它显示了如果您有一个可见字段和一个隐藏字段会发生什么，然后显示隐藏字段。

这是一个变体，它演示了如果可见字段没有autofocus属性会发生什么。

Answer 2

HTML5 草案标准只要求一个元素是“可聚焦的”，其中可聚焦意味着：

如果用户代理的默认行为允许它是可聚焦的，或者如果该元素是特别可聚焦的，则该元素是可聚焦的，但前提是该元素正在呈现或者是表示嵌入内容的画布元素的后代。除非平台约定另有规定，否则用户代理应使以下元素具有焦点：

• a具有href属性的元素
• link具有href属性的元素
• button未禁用的元素
• inputtype 属性未处于隐藏状态且未禁用的元素
• select未禁用的元素
• textarea未禁用的元素
• command没有 disabled 属性的元素
• 具有draggable属性集的元素，如果这将使用户代理允许用户在不使用定点设备的情况下开始对这些元素进行拖动操作
• 编辑主机
• 浏览上下文容器

它确实说“但只有当元素被渲染时......”并且标准将“渲染”定义为：

如果元素在 Document 中，则元素正在被渲染，它的父节点本身正在被渲染或者它是 Document 节点，并且它没有使用以下任一方法明确地从渲染中排除：

• CSS 'display' 属性的 'none' 值，或
• 'visibility' 属性的 'collapse' 值，除非它被视为等同于 'hidden' 值，或者
• 其他样式语言中的一些等价物。只是在屏幕外并不意味着元素没有被渲染。hidden 属性的存在通常意味着元素没有被渲染，尽管这可能会被样式表覆盖。尽管如此，不尊重作者级 CSS 样式表的用户代理仍被期望以与本规范和相关 CSS 和 Unicode 规范一致的方式应用这些部分中给出的 CSS 规则。

简而言之，答案似乎是，如果所有其他要求都得到满足，那么display:none将不会被关注，而是display:hidden会——假设所有浏览器实际上都遵循规范。