BLOGTIMES
2020/06/20

clipboard.js でウェブサイトにクリップボードにコピーボタンを作る

  javascript 
このエントリーをはてなブックマークに追加

JavaScript からクリップボードを扱うために clipboard.js を使ってみたのでメモ。
これまで ZeroClipboard を使っていたのですが、Flash ももう少しでサポート終了ですかrね。

clipboard.js — Copy to clipboard without Flash

A modern approach to copy text to clipboard
No Flash. No frameworks. Just 3kb gzipped

使い方は簡単で、こんな感じで組み込みできます。

<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> <button class="btn" data-clipboard-text="hoge">hogeをクリップボードにコピー</button> <script>new ClipboardJS('.btn');</script>

実際の動作例はこんな感じです。


    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/11801
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン