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

Setting HTML5 autofocus attribute with CSS

本文关键字：属性 CSS 设置 HTML5 使用      更新时间：2023-09-26

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

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

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

我知道我可以用Javascript来设置重点，但现在页面不使用任何Javascript，如果可能的话，我更愿意避免使用CSS。

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

CSS：

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

请参阅使用CSS的示例。

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

请参阅使用jQuery的示例。

相关文章：