Javascriptでテキストをコピーする軽量ライブラリ「clipboard-copy」



javascriptで テキストをコピーするライブラリ「clipboard-copy」の紹介です。

 ブログなどのトラックバックリンク、プログラミングのソースコードのを 載せているサイトなどでは、テキストをコピーする機能があれば ユーザビリティーが広がる場面があります。

 そのような機能を簡単に実装できる Javascript用のライブラリが「clipboard-copy」です。
 

clipboard-copy で出来ること 

- 短いコードでテキストをコピーする処理を簡単に書くことが出来ます

* clipboard-copyを使ったフォーム内のテキストをコピーするGIF
( *bootstrap 4 と組み合わせています )


clipboard-copy のインストール

 clipboard-copy のインストールは、' npm ' 又は ' yarn ' を使っておこないます。また、' CDN ' を通して ブラウザ上から直接ライブラリを読み込んで使用する事も可能です。
( * サポートされているブラウザは Chrome, Firefox, Edge, Safari, IE11 )

# npm
npm i clipboard-copy
# yarn
yarn add clipboard-copy
# CDN
https://unpkg.com/clipboard-copy


clipboard-copy の使い方

 clipboard-copyの使い方はとても簡単で、ライブラリのメソッドを呼び出して、コピーさせたい文字列を引数に入れるだけで使うことが出来ます。

import copy from "clipboard-copy";
// const copy = require('clipboard-copy')

// クリップボードにコピーされます
var str = 'copyテキスト';
copy(str); // 変数 str のテキストがコピーされます


ブラウザから直接ライブラリやCDNを通して使う時は ' clipboardCopy ' メソッドを使います。

clipboardCopy('コピーするテキストデータ');


 ボタン等のクリックした時にテキストをコピーさせたい処理は下記のようなコードになると思われます。

import copy from "clipboard-copy";

let el = document.getElementById("btn"); // ボタンのid
let text = document.getElementById('formText'); // インプットのid
// id 'btn'が押された時の処理
el.addEventListener("click", function(e) {
  alert('フォームの値がコピーされました')
  copy(text.value); // フォーム内の値をコピー
});


Summary

 以上が clipboard-copy の紹介でした。同等の機能を持ったライブラリに clipboard.js が挙げられますが、clipboad-copyは機能が絞られているので軽量になっています。

Electronや モダンブラウザ用で テキストのコピー機能を組み込む時に手軽に実装出来そうなライブラリです。

GitHub : feross/clipboard-copy

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ