单击按钮时自动聚焦到输入（对于 AMP 文章）答案

【问题标题】：Auto focus to an input when a button is clicked (For AMP articles)单击按钮时自动聚焦到输入（对于 AMP 文章）
【发布时间】：2017-05-23 07:12:07
【问题描述】：

我是使用 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">

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

我也遇到了这个github issue，但找不到任何可以帮助我解决的问题。

干杯

【问题讨论】：

我尝试将 <script> 标签添加到 head 部分，但根据 amp 验证器不允许：validator.ampproject.org
我也遇到了这个github.com/ampproject/amphtml/issues/6102，但找不到任何可以帮助我解决的问题
那么我建议您编辑您的问题并添加这些详细信息。如果没有，那么您可能会发现人们发布了无用的建议。这就是为什么用你已经尝试过的东西来解释问题很重要，这样人们就不会建议你尝试过的东西，除非他们能想到你可能做错了什么，因为它不起作用。
好的，谢谢@NewToJS 从现在开始。

标签： javascript jquery wordpress amp-html

【解决方案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 中，它可以完全按照您的需要工作。

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

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

【讨论】：