スポンサーリンク
自サイト内のコードをコピペするときに、時々このコードをコピーボタンが恋しくなる。実装するにはどうすればいいのか調べた。JavaScriptでクリップボードにコピーするらしい。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> </head> <body>
<div> <pre id="code1"><code>print("Hello, World!")</code></pre> <button onclick="copyToClipboard('code1')">コピー</button> </div>
<div> <pre id="code2"><code>sudo apt-get update</code></pre> <button onclick="copyToClipboard('code2')">コピー</button> </div>
<script>
// クリックすると呼び出される function copyToClipboard(elementId) { var codeBlock = document.getElementById(elementId); // preの中身全部が入る var range = document.createRange(); // ドキュメントの一部を選択する貯めのオブジェクトを作成 range.selectNode(codeBlock); window.getSelection().removeAllRanges(); // 選択解除 window.getSelection().addRange(range); // 選択範囲に、codeBlockを追加済みのrangeオブジェクトを指定 try { document.execCommand('copy'); // クリップボードへコピー } catch (err) { alert('コピー失敗'); } window.getSelection().removeAllRanges(); }
</script> </body> </html>
print("Hello, World!")sudo apt-get updatecode1とかが冗長な気がして調べたら、previousElementSiblingで、オブジェクトの一つ前のエレメントを取得できるらしい。
さらにnavigator.clipboard.writeTextでクリップボードに書き込めるので、だいぶシンプルになった。
<html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> </head> <body>
<div> <pre><code>print("Hello, World!")</code></pre> <button onclick="copyToClipboard(this)">コピー</button> </div>
<div> <pre><code>sudo apt-get update</code></pre> <button onclick="copyToClipboard(this)">コピー</button> </div>
<script>
// クリックすると呼び出される function copyToClipboard(elem) { var codeBlock = elem.previousElementSibling; // elem の前の要素を取得 var codeText = codeBlock.innerText || codeBlock.textContent; // elem からテキストを取得 navigator.clipboard.writeText(codeText); // テキストをクリップボードにコピー }
</script> </body> </html>