テキストボックスの内容をボタンでコピーやカットできるライブラリ「clipboard.js」

プログラムとかを組んでいると、コピペやカットとはショートカットキーを使うのが当たり前になってますよね。
でも意外とコピペとかのショートカットキーを知らない人って多いんです。
今回はテキストボックスの内容をショットカットキーを使わずボタンでコピーできるようになるライブラリ「clipboard.js」を紹介します。

導入方法

ダウンロード

公式サイトにアクセスしてzipファイルをダウンロードしましょう。
zipファイルを展開してclipboard.min.jsを適当なディレクトリに配置してください。
また、ダウンロードがめんどくさい方はこちらのCDNを利用してください。
今回のサンプルはめんどくさいのでCDNを使います。

コーディング

まずは本体を読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

続いて、コピー用のテキストボックスとボタン、カット用のテキストボックスとボタンを記述します。

<!--コピー用のテキストボックスとボタン-->
<input type="text" value="コピーコピーコピーコピーコピーコピー" id="copybox">
<input type="button" value="コピー" class="clipbtn" 
 data-clipboard-target="#copybox">

<!--カット用のテキストボックスとボタン-->
<input type="text" value="カットカットカットカットカットカット" id="cutbox">
<input type="button" value="カット" class="clipbtn"
 data-clipboard-action="cut" 
 data-clipboard-target="#cutbox">

ボタンに data-clipboard-target=”テキストボックスのID”　を記述することで、コピーやカット対象のテキストボックスを指定できます。
また、カットを行う場合はボタンに　data-clipboard-action=”cut” の記述をしてください。

次に下記のスクリプトを記述してください。
たった一行で実装できます。

new Clipboard('.clipbtn');

[btn class=”rich_pink”]デモ確認[/btn]

コピーやカットをした時のイベントを取得する場合

コピーやカットをした時のイベントも取得することができます。

var clipboard = new Clipboard('.clipbtn');

//成功した時の処理
clipboard.on('success', function (e) {
    //コピーなのか、カットなのか取得
    console.info('Action:', e.action);
    //コピーした内容を取得
    console.info('Text:', e.text);
    //どのボタンが押されたのか取得（HTLMタグ)
    console.error('Trigger:', e.trigger);
    //テキストが選択された状態になるので、解除する場合は下記のコードを書く
    e.clearSelection();
});

//エラーになった時の処理
clipboard.on('error', function (e) {
    //コピーなのか、カットなのか取得
    console.error('Action:', e.action);
    //どのボタンが押されたのか取得（HTLMタグ)
    console.error('Trigger:', e.trigger);
});

[btn class=”rich_pink”]デモ確認[/btn]