усиление с использованием фокуса и размытия на входных элементах - PullRequest
Новая
       19

усиление с использованием фокуса и размытия на входных элементах

0 голосов
/ 03 июля 2018

Я довольно новичок в AMP, и я создал несколько страниц, так что терпите меня, если я звучу глупо.

У меня есть поле ввода, и я хочу вызвать некоторые классы для других элементов с фокусировкой и размытием ввода.

Вот пример кода, который я написал для ввода: 

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

И вот что я имею для элемента, который я хочу активировать, фокусируя ввод: 

<div class="test" [class]="isFocued ? 'test focused' : 'test'">
.....
</div>

Я должен отметить, что эти элементы довольно далеко друг от друга в DOM, поэтому использование CSS (+ и ~) невозможно.

Спасибо

1 Ответ

0 голосов
/ 03 июля 2018

В настоящее время событие фокуса можно смоделировать с помощью события касания, но это работает только для мыши, а не для клавиши табуляции.

Вот ссылка Ссылка на выпуск

Вы также можете достичь своей цели с помощью css Рабочий 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>
...