当前位置：文江博客话题详情

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

发布于 2025-01-02 04:58:25 字数 141 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剑心龙吟 2025-01-09 04:58:25

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

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

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

这里有一个变体，演示了如果可见字段没有自动对焦会发生什么情况属性。

回复收藏 0 原文

笨笨の傻瓜 2025-01-09 04:58:25

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

如果用户代理的默认行为允许，则元素是可聚焦的
可聚焦或者元素是否特别可聚焦，但前提是
该元素要么正在渲染，要么是画布的后代
表示嵌入内容的元素。
用户代理应该使以下元素成为焦点，除非平台约定另有规定：
具有 href 属性的
a 元素
具有 href 属性的
link 元素
button 未禁用的元素
input 元素的 type 属性未处于隐藏状态且未禁用
选择未禁用的元素
未禁用的
textarea元素
command 元素没有禁用属性
设置了 draggable 属性的元素，如果这将使用户代理允许用户开始对这些元素进行拖动操作
不使用指点设备的元素
编辑主机
浏览上下文容器

它确实说“但仅当元素正在渲染时...”并且标准将“渲染”定义为：

如果某个元素位于文档（或其父元素）中，则该元素正在被渲染
节点本身正在被渲染或者它是文档节点，并且它是
未使用以下任一方式从渲染中明确排除：
CSS“display”属性的“none”值，或者
“visibility”属性的“collapse”值，除非它被视为等同于“hidden”值，或者
其他样式语言中的一些等效项。
仅仅离开屏幕并不意味着该元素没有被渲染。隐藏属性的存在通常意味着
元素没有被渲染，尽管这可能会被覆盖
样式表。
尽管如此，不尊重作者级 CSS 样式表的用户代理仍应表现得就像应用了中给出的 CSS 规则一样。
这些部分的方式与本规范和
相关 CSS 和 Unicode 规范。

简而言之，答案似乎是，如果满足所有其他要求，则 display:none 将不会获得焦点，但 display:hidden 将会获得焦点 - 假设所有浏览器实际上都遵循规格

The HTML5 draft standard only requires that an element be "focusable" where focusable means:

An element is focusable if the user agent's default behavior allows it
to be focusable or if the element is specially focusable, but only if
the element is either being rendered or is a descendant of a canvas
element that represents embedded content.
User agents should make the following elements focusable, unless platform conventions dictate otherwise:
a elements that have an href attribute
link elements that have an href attribute
button elements that are not disabled
input elements whose type attribute are not in the Hidden state and that are not disabled
select elements that are not disabled
textarea elements that are not disabled
command elements that do not have a disabled attribute
Elements with a draggable attribute set, if that would enable the user agent to allow the user to begin a drag operations for those
elements without the use of a pointing device
Editing hosts
Browsing context containers

It does say "but only if the element is either being rendered..." and the standard defines "rendered" as:

An element is being rendered if it is in a Document, either its parent
node is itself being rendered or it is the Document node, and it is
not explicitly excluded from the rendering using either:
the CSS 'display' property's 'none' value, or
the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or
some equivalent in other styling languages.
Just being off-screen does not mean the element is not being rendered. The presence of the hidden attribute normally means the
element is not being rendered, though this might be overridden by the
style sheets.
User agents that do not honor author-level CSS style sheets are nonetheless expected to act as if they applied the CSS rules given in
these sections in a manner consistent with this specification and the
relevant CSS and Unicode specifications.

In short, the answer appears to be that if all other requirements are met then display:none won't be focused but display:hidden will - Assuming all browsers actually follow the spec.

回复收藏 0 原文

~没有更多了~