[AMP] 點擊按鈕與內容複製功能

分享:

 要在 AMP 的頁面使用複製功能,先讀入這隻 js:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

接著像這樣配置就能複製內容了:

<amp-iframe sandbox="allow-scripts" width="64" height="42" frameborder="0" src="/static/samples/files/copier.html#This text was copied from amp.dev!">
  <button class="copy-button" placeholder disabled>Copy</button>
</amp-iframe>

 

如果要讓使用者複製輸入內容,可以像這樣設置輸入欄位:

<span>
  <input type="text" value="Hello World" on="input-debounced: AMP.setState({ textToCopy: event.value })">
  <div>Copy the contents of the input</div>
</span>

按鈕的部分:

<amp-iframe sandbox="allow-scripts" width="64" height="42" frameborder="0" src="/static/samples/files/copier.html#Hello World" [src]="'/static/samples/files/copier.html#' + textToCopy">
  <button class="copy-button" placeholder disabled>Copy</button>
</amp-iframe>

詳細可以看
AMP 官方的說明

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。