####目標
<pre>にて表示したコードをclipboard.jsを使い、<pre>全体をクリックすることでコピーするようにする。 ![イメージ画像](a4b8a7611547fa2e8c5b4a751b20a920.png) ####使用してみた大まかなHTML構成 <pre>自体にdata-clipboard-targetでidをつけた場合 ```HTML <pre class="html hljs xml" data-clipboard-target=".hljs"> テスト </pre><pre>自体にdata-clipboard-targetでclassをつけた場合 ```HTML <pre class="html hljs xml" id="hljs" data-clipboard-target="#hljs"> テスト </pre>
####使用してみたJavaScript
.hljsで実装した場合
JavaScript
1// 起動 2var cp = new Clipboard( ".hljs" ) ;
preで実装した場合
JavaScript
1// 起動 2var cp = new Clipboard( "pre" ) ;
固定JavaScript
JavaScript
1// 読み込み 2<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js'/> 3// 成功時アラート 4cp.on( "success", function(e) { 5 alert( "コードのコピーに成功しました!!" ) ; 6} ) ; 7// 失敗時アラート 8cp.on( "error", function(e) { 9 alert( "コードのコピーに失敗しました…" ) ; 10} ) ;
####要望
- HTMLをいじりたくない
解決方法がわかる方は教えてください
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/23 01:31
2016/11/23 01:39
2016/11/23 02:15