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

Question

我有一个只有一个输入框的网站(就像一个搜索引擎)，我在上面使用了 HTML5 autofocus 属性。

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

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

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

Answer 1

正如上面评论中的建议: 使用两个输入并隐藏一个(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 .