是否将焦点设置为使用HTML5自动对焦的隐形表单控件?

时间:2012-02-03 01:24:09

标签: forms html5 autofocus

正如标题所述:即使隐藏了autofocus="autofocus"display: none;,表单控件仍会设置焦点visibility: hidden;吗?

2 个答案:

答案 0 :(得分:5)

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

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

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

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

答案 1 :(得分:2)

HTML5 draft standard只要求一个元素在可聚焦意味着“可聚焦”:

  

如果用户代理的默认行为允许,则元素是可聚焦的   可聚焦或如果元素是特别可聚焦的,但仅限于   元素要么被渲染,要么是画布的后代   表示嵌入内容的元素。        除非平台惯例另有规定,否则用户代理应使以下元素具有可关注性:

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

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

  

如果元素位于Document(父元素)中,则会呈现该元素   节点本身正在呈现,或者它是Document节点,它是   未使用以下任一方法从渲染中明确排除:

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

简而言之,答案似乎是,如果满足所有其他要求,那么display:none将无法集中,但display:hidden将 - 假设所有浏览器实际上都遵循规范。