Flashを使わずにクリップボードへのカットやコピーができるJavaScriptのライブラリを利用します。
clipboard.js — Copy to clipboard without Flash
https://clipboardjs.com/
ボタンを押すとコピー(カット)されるシンプルなものです。ボタンごとにJavaScriptのコードを追加するのは大変です。JavaScriptの宣言1つだけで動作するようにしてみます。
<!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
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
Classがbtnであるものに対して動作させます。この宣言だけで、下記3つのサンプルが動作します。ボタンを増やしたとしてもJavaScriptのコードを追加する必要がありません。
<script>
window.onload = function () {
new Clipboard('.btn');
};
</script>
サンプル1 値をコピーする
ボタンのclassをbtnとすることで動作させます。
data-clipboard-textで指定された値がコピーされます。
<!-- tag -->
<button class="btn" data-clipboard-text="この値がコピーされます">
タグ内の値をクリップボードへコピー
</button>
サンプル2 テキスト欄の値をコピーする
ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#fooとしてidがfooであるものをターゲットとしています。
<!-- input -->
<input id="foo" value="inputの値">
<button class="btn" data-clipboard-target="#foo">
対象:inputのvalue
</button>
サンプル3 テキストエリアの値をコピー・カット
ボタンのclassをbtnとすることで動作させます。
data-clipboard-targetで、ボタンをクリックした際にどこの値を利用するか指定します。
ここでは、#barとしてidがbarであるものをターゲットとしています。
data-clipboard-action="cut"を指定するとカットとなります。
<!-- 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>