Question

我在AMP上还很陌生，已经建立了几页，所以如果我听起来很傻，请多包涵。

我有一个输入框，我想通过聚焦和模糊输入来触发其他元素上的某些类。

这是我为输入编写的示例代码：

foreach(var testRecord in testRecords)
{
    csv.WriteField(".USER_ID.");
    csv.WriteField(testRecord.USER_ID);
    csv.NextRecord();
}

这就是我想通过集中输入来触发元素的条件：

<input type="text" id="selectedFilter_SearchBox"
     on="focus:AMP.setState({isFocued: true}),
         focus:AMP.setState({isFocued: false})"/>

我应该提到，这些元素在DOM上相距甚远，因此不可能使用CSS（+和〜）。

谢谢

Answer 1

当前，可以使用tap事件来模拟焦点事件，但这仅适用于鼠标，不适用于Tab键。

Here is the reference Issue link

您也可以通过CSS Working Url

实现您的目标

代码

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="you-link-or-same-page.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
     <style amp-custom>
    .test { display:none;}
    #selectedFilter_SearchBox:focus + .test { display:block; }
  </style>
</head>
 <body>
 <input type="text" id="selectedFilter_SearchBox" /> 
   <p class="test">
    Your content here .....
  </p>
  </body>
</html>

放大器在输入元素上使用聚焦和模糊

1 个答案: