[JS]テキストをクリップボードにコピーさせることができるプラグイン「clipboard.js」
スポンサード
また、clipboard.js提供元のサイトでは、クリップボードへのコピー成功時のメッセージをツールチップで表示していましたが、今回は
以下にclipboard.js のデモを用意しました。
テキストにクリップボードにコピーするデモ
スポンサード
ソースコードやテキストをクリップボードにコピーしてもらうのに便利なjQuery プラグイン「clipboard.js」のご紹介です。
clipboard.js ファイルのダウンロード
以下のページからclipboard.js-masterのファイルをダウンロードします。Javascript
<head>タグ内でjqueryファイルと一緒にclipboard.min.jsファイルを読み込ませます。<script src="./jquery.min.js"></script> <script src="./clipboard.min.js"></script> <script> $(document).ready(function(){ var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { e.clearSelection(); alert('テキストをクリップボードにコピーしました'); }); }); </script>CDNもありますので、以下のページから最新版のclipboard.jsを読み込ませても良いです。
また、clipboard.js提供元のサイトでは、クリップボードへのコピー成功時のメッセージをツールチップで表示していましたが、今回は
alert
でメッセージを出すようにカスタマイズしています。HTML
クリップボードにコピーしたい要素(テキスト)と、「クリップボードにコピー」のようなボタンを設置します。<pre id="foo"> あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、 ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、 山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、 みんなむかし風のなつかしい青い幻燈のように思われます。 では、わたくしはいつかの小さなみだしをつけながら、 しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。 </pre> <button class="btn" data-clipboard-target="#foo"> クリップボードにコピー </button>buttonタグの
data-clipboard-target
に、コピーの対象となる要素のIDを指定します。以下にclipboard.js のデモを用意しました。
テキストにクリップボードにコピーするデモ
スポンサード
コメント