短網址
發表留言
源碼分享
人氣 65°c

JS複製按鈕clipboard copy element

程序員製作的軟體或APP程式，除了有必要性的功能外，可能還會加上清除(清空)、復原(還原)、複製等…功能，現在推薦一個使用 JavaScript 編寫的複製按鈕 Copy Button，支援電腦軟件，手機APP和Chrome﹑Firefox﹑Safari﹑Microsoft Edge 主流瀏覽器。

這個 Clipboard Copy Element 是在 GitHub 開源項目，得到 21 位開發成員無私製作出來的，這個 Copy 按鈕不簡單，可以運用到 input、div、span、textarea以及自定義id等!...

clipboard-copy element：GitHub 專頁

加載 JavaScript 庫：

<script type="module" src="https://unpkg.com/@github/clipboard-copy-element@latest"></script>

CSS 代碼：

    <style>
      clipboard-copy {
        -webkit-appearance: button;
        -moz-appearance: button;
        padding: 0.4em 0.6em;
        font: 0.9rem system-ui, sans-serif;
        display: inline-block;
        cursor: default;
        color: rgb(36, 41, 47);
        background: rgb(246, 248, 250);
        border-radius: 6px;
        border: 1px solid rgba(31, 35, 40, 0.15);
        box-shadow: rgba(31, 35, 40, 0.04) 0 1px 0 0, rgba(255, 255, 255, 0.25) 0 1 0 0 inset;
      }
      clipboard-copy:hover {
        background: rgb(243, 244, 246);
      }
      clipboard-copy:active {
        background: #ebecf0;
      }
      clipboard-copy:focus-visible {
        outline: 2px solid #0969da;
      }
      .textarea {
        margin-top: 30px;
        display: block;
      }
    </style>

JS 複製提示信息：可加可不加

    <script>
      document.addEventListener('clipboard-copy', function (event) {
        const notice = event.target.querySelector('.notice')
        announce.setAttribute('aria-label', 'Copied');
        notice.hidden = false
        setTimeout(function () {
          announce.setAttribute('aria-label', '');
          notice.hidden = true
        }, 1000)
      })
    </script>

body內容：

      <div aria-live="polite" id="announce"></div> <!-- 提示信息 -->
      <section>
        <p>Copy from <code>value</code> attribute:</p>
        <clipboard-copy value="@hubot copied from [value]">
          Copy
          <span class="notice" hidden>Copied!</span>
        </clipboard-copy>
      </section>
      <hr />

      <section>
        <p>Copy from an element specified by the <code>for</code> attribute:</p>
        <div id="name">@hubot copied from &lt;div&gt;</div>
        <clipboard-copy for="name">
          Copy
          <span class="notice" hidden>Copied!</span>
        </clipboard-copy>
      </section>
      <hr />

      <section>
        <label>
          <p>Copy from an input element specified by the <code>for</code> attribute:</p>
          <input id="login" value="@hubot copied from &lt;input&gt;" size="40" />
        </label><br />
        <clipboard-copy for="login">
          Copy
          <span class="notice" hidden>Copied!</span>
        </clipboard-copy>
        </section>
      <hr />

      <section>
        <label>
          Paste the text here to test
          <textarea class="textarea" rows="10" cols="50"></textarea>
        </label>
      </section>

代碼測試：www.ifreesite.com/runcode.htm

程序演示：Clipboard copy examples

這個複製按鈕也好用>> loud.tsyidc.com/technology

標籤：