使用 CSS 设置 HTML5 自动对焦属性

Question

我有一个网站，它有一个输入字段（如搜索引擎），我在上面使用 HTML5 autofocus 属性。

但在非常小的屏幕尺寸上，许多设备上弹出的软键盘会遮挡太多屏幕。

是否可以在 CSS 媒体查询中设置 autofocus 属性，使其仅在较大的显示器上有效？

我知道我可以使用 Javascript 设置焦点，但现在页面不使用任何 Javascript，如果可以为此使用 CSS，我宁愿避免使用它。

Answer 1

如上面 cmets 中的建议： 使用两个输入并隐藏一个 (display:none;)。然后使用@media 规则目标屏幕，其最大宽度为480px，并使隐藏的输入可见（display:block;）并隐藏另一个。

CSS：

.smscreen {
  display: none; 
}

@media screen and (max-width: 480px) {
  .lgscreen {
    display: none;
  }

  .smscreen {
    display: block;
  }

}

请参阅 Example using CSS。

---

否则，您可以在页面加载时使用 jQuery 检测窗口大小，如果屏幕大于480px，则在输入时使用.focus() 函数。

见Example using jQuery。