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

Question

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

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

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

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

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 检测 window 大小，如果屏幕大于 480px 则在输入上使用 .focus() 函数.

参见Example using jQuery。

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

Setting HTML5 autofocus attribute with CSS

html

javascript

css

autofocus