【问题标题】:Setting HTML5 autofocus attribute with CSS使用 CSS 设置 HTML5 自动对焦属性
【发布时间】:2015-03-27 08:35:06
【问题描述】:

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

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

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

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

【问题讨论】:

  • 如果你真的不想使用 JS,你可以有两个输入(一个带自动对焦,另一个不带),并通过媒体查询显示一个或另一个。隐藏的输入没有自动对焦;)

标签: javascript css html autofocus


【解决方案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

【讨论】:

  • jQuery 演示不起作用。 1. 您还需要在页面加载时执行此操作(因此您不必必须调整窗口大小以使其工作)。 2. 后面添加属性好像不是设置焦点。由于我们不关心输入是否关注窗口调整大小(移动用户不会调整他们的窗口大小),如果屏幕大小足够大,您可以在页面加载时 .focus() 它:codepen.io/anon/pen/wBOwep跨度>
  • 哎呀,我的错。谢谢你的提示。我可以在 jQuery 示例中包含您的笔吗?
  • 我的,正在调整大小。打开控制台并调整窗口大小以查看它的添加和删除。不做任何事情的原因很奇怪,请参阅here a working autofocus input并将其与this here进行比较。注意这两个中type="text"autofocus 的间距。所以我假设像this one一样附加它。
  • 不错的收获!这确实很奇怪。看起来像一个错误。
  • 是的,我不确定它是什么!我包含了您的 jquery 解决方案并删除了我的解决方案。
猜你喜欢
  • 1970-01-01
  • 2011-03-01
  • 2013-05-23
  • 2016-01-19
  • 1970-01-01
  • 2017-08-08
  • 2020-11-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多