-
execCommandを使用する方法:
function copyToClipboard(text) { var dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); }
この方法では、テキストを一時的にtextarea要素にコピーし、
document.execCommand("copy")
を使用してコピー操作を実行します。 -
Clipboard APIを使用する方法:
function copyToClipboard(text) { navigator.clipboard.writeText(text) .then(function() { console.log("テキストがクリップボードにコピーされました"); }) .catch(function(err) { console.error("クリップボードへのコピーに失敗しました: ", err); }); }
この方法では、
navigator.clipboard.writeText(text)
を使用して指定したテキストをクリップボードに書き込みます。成功した場合はthen
ブロックが実行され、失敗した場合はcatch
ブロックが実行されます。 -
ライブラリを使用する方法: JavaScriptのクリップボードコピーに特化したライブラリも利用できます。一つ例を挙げると、Clipboard.jsです。 まず、ライブラリをダウンロードまたはCDNから読み込みます。次に、以下のように使います:
var clipboard = new ClipboardJS('.copy-button', { text: function(trigger) { return trigger.getAttribute('data-copy-text'); } });
この例では、
.copy-button
というクラスが付いた要素をクリックした際に、data-copy-text
属性の値をクリップボードにコピーします。