タグだけでクリップボードへコピー・カットする（JavaScript、clipboard.js） #JavaScript

Flashを使わずにクリップボードへのカットやコピーができるJavaScriptのライブラリを利用します。

clipboard.js — Copy to clipboard without Flash
https://clipboardjs.com/

ボタンを押すとコピー（カット）されるシンプルなものです。ボタンごとにJavaScriptのコードを追加するのは大変です。JavaScriptの宣言１つだけで動作するようにしてみます。

clipboard.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clipboard</title>
</head>
<body>

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

<script>
window.onload = function () {
    new Clipboard('.btn');
};
</script>

<!-- tag -->
<button class="btn" data-clipboard-text="この値がコピーされます">
タグ内の値をクリップボードへコピー
</button>

<!-- input -->
<input id="foo" value="inputの値">
<button class="btn" data-clipboard-target="#foo">
対象：inputのvalue
</button>

<!-- textarea -->
<textarea id="bar">テキストエディタの文字</textarea>
<button class="btn" data-clipboard-target="#bar">
対象：テキストエリアの文字をコピー
</button>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
対象：テキストエリアの文字をカット
</button>

</body>
</html>

それぞれ中身の解説です。

clipboard.min.js のみで動きます。ファイルはCDNでも提供されています。
https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

clipboard.html

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

Classがbtnであるものに対して動作させます。この宣言だけで、下記３つのサンプルが動作します。ボタンを増やしたとしてもJavaScriptのコードを追加する必要がありません。

clipboard.html

<script>
window.onload = function () {
    new Clipboard('.btn');
};
</script>

サンプル１　値をコピーする

ボタンのclassをbtnとすることで動作させます。
data-clipboard-textで指定された値がコピーされます。

clipboard.html

<!-- tag -->
<button class="btn" data-clipboard-text="この値がコピーされます">
タグ内の値をクリップボードへコピー
</button>

サンプル２　テキスト欄の値をコピーする

ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#fooとしてidがfooであるものをターゲットとしています。

clipboard.html

<!-- input -->
<input id="foo" value="inputの値">
<button class="btn" data-clipboard-target="#foo">
対象：inputのvalue
</button>

サンプル３　テキストエリアの値をコピー・カット

ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#barとしてidがbarであるものをターゲットとしています。

data-clipboard-action="cut"を指定するとカットとなります。

clipboard.html

<!-- textarea -->
<textarea id="bar">テキストエディタの文字</textarea>
<button class="btn" data-clipboard-target="#bar">
対象：テキストエリアの文字をコピー
</button>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
対象：テキストエリアの文字をカット
</button>