ミギムキ

[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;」にしています
スポンサー広告