JavaScriptの .execCommand('copy') を使って、クリップボードの操作をします。
現在このメソッドは、非推奨となっている為、今後利用できなくなる可能性があり、その場合には Clipboard API が推奨されているので、あわせてそちらもチェックするようにしましょう。
.execCommand(‘copy’)
JavaScriptの document.execCommand('copy'); は、任意のテキストをクリップボードにコピーするメソッドです。
document.execCommand('copy');
ちなみに、カットする場合は .execCommand('cut') と記述します。
MDN web docsによると、「使用を避け、できれば既存のコードは更新してください。」の一文で、非推奨になっています。記事執筆時点では動作していますが、今後動作しなくなる可能性が高いので、使用はご注意ください。
クリップボードのサンプル
早速サンプルです。
テキストエリアに表示された「テキスト」が、「テキストをコピー」のボタンクリックでクリップボードにコピーされ、完了すると「コピーしました。」のメッセージがウインドウにアラート表示されます。
テキストエリアの文字列はブラウザで変更可能です。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめに、設置したい場所にHTMLのコードを記述します。
<input type="text" value="テキスト" id="copyTxt">
<button id="copyBtn"><i class="fas fa-copy"></i> テキストをコピー</button>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
document.getElementById('copyBtn').addEventListener('click', () => {
document.getElementById('copyTxt').select(); // テキストエリアを選択
const elementTxt = document.getElementById('copyTxt'); /// テキストエリアを取得
document.execCommand('copy'); //クリップボードへコピー
alert('「' + elementTxt.value + '」をコピーしました。'); // コピー完了時にアラートで表示
});ざっくりとしたコードの解説
コードはHTML・JavaScriptの2種で、見た目を整える部分はないのでCSSは割愛しています。順に解説していきます。
HTML
HTMLは、テキストエリアの input タグと、テキストのコピーを行う button タグの2種類です。
<input type="text" value="テキスト" id="copyTxt">
<button id="copyBtn"><i class="fas fa-copy"></i> テキストをコピー</button>input タグの value="" には、コピーされるテキストのデフォルトの値を入力するようにしましょう。
JavaScript
JavaScriptは、HTMLで設置したボタンクリックをトリガーにする .addEventListener を使い、まずはじめに.select() メソッドで要素内のテキストを選択します。
テキストを選択したら、テキストエリアを取得して document.execCommand('copy'); で文字列のコピー。そして、alert(); でウィンドウ内にアラートを表示させます。
document.getElementById('copyBtn').addEventListener('click', () => {
document.getElementById('copyTxt').select(); // テキストエリアを選択
const elementTxt = document.getElementById('copyTxt'); /// テキストエリアを取得
document.execCommand('copy'); //クリップボードへコピー
alert('「' + elementTxt.value + '」をコピーしました。'); // コピー完了時にアラートで表示
});余談ですが、.addEventListener でコードを書いておくとメンテナンスも簡単です。
さいごに
この記事のテキストエリアは、文字の変更等いじれるようにしていますが、テキストの修正ができないようにするにはCSSで pointer-events: none; を書いてあげれば、変更不可に設定できます。
