将焦点设置为使用HTML5自动对焦的不可见窗体控件



正如标题所述:即使使用display: none;visibility: hidden;隐藏表单控件,焦点是否仍会设置在使用autofocus="autofocus"的表单控件上?

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

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

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

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

HTML5草案标准只要求元素是"可聚焦的",其中可聚焦的意思是:

如果用户代理的默认行为允许,则元素是可聚焦的是可聚焦的,或者如果元素是可特别聚焦的,但仅当元素正在被渲染,或者是画布的后代表示嵌入内容的元素。除非平台约定另有规定,否则用户代理应使以下元素可聚焦:

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

它确实说"但前提是元素正在被渲染…",标准将"渲染"定义为:

如果元素在文档中,则呈现该元素,无论是其父元素节点本身正在渲染,或者它是Document节点,并且未明确排除在使用以下任一项的渲染中:

  • CSS"display"属性的"none"值,或
  • "visibility"属性的"collapse"值,除非它被视为等效于"hidden"值,或者
  • 其他样式语言中的一些等效语言。离开屏幕并不意味着元素没有被渲染。隐藏属性的存在通常意味着元素未被呈现,但这可能被样式表。尽管如此,不遵守作者级CSS样式表的用户代理仍然应该像应用中给出的CSS规则一样工作以符合本规范和相关的CSS和Unicode规范

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

最新更新