ミギムキ

[JavaScript] テキストエリアの文章をクリップボードにコピーしたい

テキストエリアの文章をクリップボードにコピー

サンプルコード

html

<textarea></textarea> <button class="copy_clipboard">クリップボードにコピー</button>
スポンサー広告

JavaScript

document.addEventListener('DOMContentLoaded', function() { function copyClipboard(event) { const clipboard = document.createElement('textarea'); clipboard.value = event.target.previousElementSibling.value; event.target.appendChild(clipboard); clipboard.select(); document.execCommand('copy'); event.target.removeChild(clipboard); } const buttons = document.getElementsByClassName('copy_clipboard'); for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', copyClipboard); } });

サンプルコードの解説

const clipboard = document.createElement('textarea'); clipboard.value = event.target.previousElementSibling.value; event.target.appendChild(clipboard); clipboard.select(); document.execCommand('copy'); event.target.removeChild(clipboard);
スポンサー広告
const buttons = document.getElementsByClassName('copy_clipboard'); for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', copyClipboard); }

textarea以外の要素からコピーする場合

html

<code>ソースコード</code> <button class="copy_clipboard">クリップボードにコピー</button>

JavaScript

document.addEventListener('DOMContentLoaded', function() { function copyClipboard(event) { const clipboard = document.createElement('textarea'); clipboard.value = event.target.previousElementSibling.innerHTML; event.target.appendChild(clipboard); clipboard.select(); document.execCommand('copy'); event.target.removeChild(clipboard); } const buttons = document.getElementsByClassName('copy_clipboard'); for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', copyClipboard); } });
  • 変更点は一箇所だけです。要素から文字列をコピーするときの処理を「event.target.previousElementSibling.value;」から「event.target.previousElementSibling.innerHTML;」にしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告