javascript - 单击按钮时自动聚焦到输入(适用于 AMP 文章)

Question

我刚开始使用 AMP，想知道如何在单击按钮时自动聚焦到表单输入。但因为我无法添加脚本，所以我不知道如何解决这个问题。我还使用 wordpress 和 2 个插件 AMP by automattic 以及 Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi。

这是按钮:

<button on="tap:search-icon">
    <i class="icono-search"></i>
</button>

这是我想要自动对焦的输入:

<input type="text" placeholder="Type here" value="" name="s" id="s" class="user-valid valid">

我尝试将标签添加到头部，但根据 amp validator 不允许

我也遇到了这个github issue但找不到任何东西可以帮助我弄清楚。

干杯

Answer 1

您可以通过 HTML 并使用 <a> 部分解决此问题。和内部href而不是按钮。

.button-link {
  display: inline-block;
  padding: 6px 14px;
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-family: sans-serif;
}

<a href="#s" class="button-link" on="tap:search-icon">
  <i class="icono-search"></i> Search
</a>
<p>Click the button or scroll down to see the input</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<input type="text" placeholder="Type here" value="" name="s" id="s" class="user-valid valid">

在桌面版和 Android 版 Chrome 中，它完全按照您的需要运行。

单击链接后，所有主要浏览器都会将输入元素滚动到 View 中。在 Chrome 中，它会移动焦点并出现文本插入符号。在桌面版和 iOS 版 Safari 中，焦点移至输入，但文本插入符号不会出现。在 Firefox 中，它仅滚动到输入，但既不突出显示也不显示插入符号。

我知道这并不能完全解决您的问题，但根据您的使用案例以及您需要支持的浏览器，这可能比其他选择更好。如果你喜欢，make a feature request issue在 AMP 项目 GitHub 上添加全局焦点操作，类似于 existing hide and show actions 。如果您有动力自己编写该功能，请随时为 AMP 项目做出贡献。您可以实现该解决方案并创建拉取请求以供审核。我希望这对您有帮助!