document.execCommand(‘copy’)は次のように使う。ボタンを押して文字列をクリップボードにコピーするサンプルを次に示す。
「s.position = ‘fixed’」と「s.left = ‘-100%’」をやることで画面の左端の外側に配置される。
何回関数を実行しても要素は画面上で指定した位置に固定される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body> <button id="button">ボタン</button>
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$('#button').on('click', function() {
// divタグを生成する。
const div = document.createElement('div');
// textContentは要素のテキストコンテンツを表すプロパティである
div.textContent = "hello";
div.appendChild(document.createElement('pre')).textContent = '<h1>hello1</h1>\n<b>太字</b>';
//div要素のスタイルを取得する。
const s = div.style;
// 位置を固定する。
s.position = 'fixed';
// 画面外にズラす
s.left = '-100%';
//bodyにdivタグを追加される
document.body.appendChild(div);
// document.getSelection()は選択範囲を表すオブジェクトを返す。
// document.getSelection().selectAllChildren(div);は、div要素とその中のコンテンツ全体を選択する。
// selectAllChildren()メソッドは、document.getSelection()が返す選択範囲オブジェクトを使用して、
// 指定された要素(ここではdiv)の子要素(テキストや他の要素)を選択する。
// つまり、div要素の直下の子要素が対象となる。
// div要素自体と、div要素の直下の子要素が対象となる。
// それから、div要素直下にあるテキストノードである「hello」も選択範囲に含まれる。
document.getSelection().selectAllChildren(div);
// Webページ上の選択範囲をクリップボードにコピーする。
// 成功した場合はtrueを返し、失敗した場合はfalseを返します。
const result = document.execCommand('copy');
// bodyからdivタグを除去する。
//document.body.removeChild(div);
console.log("result=" + result)
});
</script>
</body>
</html>
関連
【JavaScript】任意の文字列をユーザアクションからクリップボードにコピーする (attacktube.com)