clipboardにHTML, CSSをコピーするボタンを設置

0pt   2018-10-11 14:00
IT技術情報局

「ある範囲のHTML, CSSをクリップボードに一発でコピーできるボタンが欲しい」という件に難儀したのでメモに残す。

難儀した箇所

HTMLで囲われたテキストをコピーするにはclipboard.jsなどを使って実装できるが、HTMLやCSSのコピーは正面突破しようとするとできないので、工夫が必要だった。

どうしたか

clipboard.jsでは、value評価される部分をクリップボードにコピーする仕様になっているっぽかったので、HTML, CSSを取得した上でinput valueに一旦入れてあげvalue評価させた上で、input valueを取得するようにした。
input要素についてはstyle="display: none"で表示させないようにした。

example.html id="clipboard"> id="clipboard-text" type="text" value="" style="display: none" /> class="btn copy-dom-to-clipboard-btn" data-clipboard-action="copy" data-clipboard-text="">Copy DOM type="text/javascript"> $(document).ready(function() { $('.copy-dom-to-clipboard-btn').on('click', function() { // プレビュー画面のHTML, CSSの取得 var copyTarget = document.querySelector("CSS指定").outerHTML + document.querySelector("div idなど").outerHTML; // HTML/CSSをコピーするにはDOM内でvalue評価しないといけないので対応する。 var clipBoardVal = $('#clipboard-text').val(copyTarget); $('.copy-dom-to-clipboard-btn').attr('data-clipboard-text', clipBoardVal.val()); }); var clipboard = new Clipboard('.copy-dom-to-clipboard-btn'); // コピーした時にアラートを表示する (成功時) clipboard.on( "success", function(e) { e.clearSelection(); alert( "Copied on Clipboard" ); }); });

その他 clipboard.js については下記参照
clipboard.js

Source: htmlタグが付けられた新着投稿

   ITアンテナトップページへ
情報処理/ITの話題が沢山。