BLOGTIMES
« :: »
2020/06/20

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

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

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

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>

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


    by hsur at 14:38 [5年前][4年前][3年前][2年前][1年前][1年後][2年後][3年後][4年後] |
    こんな記事もあります 「clipboard.js btn ZeroClipboard」
    ・LVM + ext4 のディスクをオンラインのまま拡張する
    ・ssh の RSA キーファイルから素数を取り出してみた
    ・Eclipse に Subcripse を入れる
    ・RPi.GPIO でボタンが押されたことを検出するには
    ・JavaScript を使ってワンクリックでウェブの内容をコピペできるようにする
    ・Googleのリアルタイム検索始まる？
    ・JavaScriptバリバリのページをスクレイピングする
    ・NP_MetaTags v1.6
    ・NP_SpamBayesJP jp1b
    ・Google Code Searchにクロールしてもらうには
    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/11801
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

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

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

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

    « :: »
    Copyright © 2004-2023 by CLES All Rights Reserved.