Question

我刚接触使用AMP，并想知道如何在单击按钮时自动对焦于表单输入。但由于我无法添加脚本，因此我不确定如何处理此问题。我也使用了WordPress和自动化的2插件AMP以及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代替按钮。

＆＃13;

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

＆＃13;

<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">

＆＃13;

在台式机和Android上的Chrome中，它可以完全按照您的需要运行。

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

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

单击按钮时自动对焦于输入（适用于AMP文章）

1 个答案: