実現方法
JavaScriptを使用してクリップボードにコピーするには2通りの方法が存在します。- navigator.clipboard.writeTextを使用する
- document.execCommand(“copy”)を使用する
navigator.clipboard.writeTextを使用した方法
navigator.clipboard.writeTextを使用する場合には以下のように記述します。var str = "コピーされました！";
navigator.clipboard.writeText(str);注意点としては、ブラウザによってはクリップボードへの書き込みへのセキュリティレベルが高く、うまく動作しないことがあります。
例えば、以下のMDNのページを見ると、Firefoxでは動作しない場合があることがわかります。
https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText
document.execCommand(“copy”)を使用した方法
先程のnavigator.clipboard.writeTextと別の方法としてはdocument.execCommand(“copy”)を使用する方法があります。こちらの方法は昔の手法であり、今では非推奨となっているのですが、navigator.clipboard.writeTextに比べるとセキュリティレベルが低く、おそらくほとんどのブラウザで問題なく動作します(今後もサポートされるかは不明)。
注意点としては、単純に引数に文字列を渡すことができず、document.execCommend(“copy”)を発行したときに選択している文字列をクリップボードにコピーする動作となることです。
以下、サンプルコードです。
var e = $("<textarea></textarea>").text(str);
$("body").append(e);
$(e).select();
document.execCommand("copy")
$(e).remove();さきほど解説したように、選択している文字列のコピーしかできないので、一度textareaを生成し、selectで選択させてからコピーを行っています。コピー後はremoveで画面から消しています。