Question

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

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

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

我知道我可以通过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 。

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

1 个答案: