<pre>内のコードをclipboard.jsを使い全てコピーしたい

####目標

<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( &quot;success&quot;, function(e) {
5	alert( &quot;コードのコピーに成功しました!!&quot; ) ;
6} ) ;
7// 失敗時アラート
8cp.on( &quot;error&quot;, function(e) {
9	alert( &quot;コードのコピーに失敗しました&#8230;&quot; ) ;
10} ) ;

####要望

HTMLをいじりたくない

解決方法がわかる方は教えてください

行動規範の内容に同意します

回答6件

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<script type="text/javascript" src="jquery-2.1.4.js"></script>
7</head>
8<body>
9  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
10  <script type="text/javascript">
11    $(function ($) {
12      var clipboard = new Clipboard('#hljs');
13
14      // 成功時アラート
15      clipboard.on('success', function(e) {
16        alert('コードのコピーに成功しました!!');
17      });
18
19      // 失敗時アラート
20      clipboard.on('error', function(e) {
21        alert('コードのコピーに失敗しました!!');
22      });
23    });
24  </script>
25<pre class="html hljs xml" id="hljs" data-clipboard-target="#hljs">
26 テスト
27</pre>
28</body>
29</html>

clipboard.jsを読み込むのはヘッダーでなければいけないのでしょうか。

ボディーでもできますが。
それとも、「JS内でclipboard.jsを読み込む」という意味ですか？
それも、少し工夫すればできます。

投稿2016/11/23 01:29

naomi3

総合スコア1105

2001Y

2016/11/23 01:31

あぁ、<pre>よりも前にclipboard.jsを読み込み、起動、しなければならないということですね？

naomi3

2016/11/23 01:39

JSの読み込み、実行はむしろ後の方が良いのです。DOM要素すなわちHTMLの読み込み、解析が終わってからの方がJSには都合が良いです。

2001Y

2016/11/23 02:15

なるほど、ありがとうございます。

行動規範の内容に同意します

ベストアンサー

Clipboardの第一引数にDOMエレメントを渡せばできるみたいですよ

javascript
1var cp = new Clipboard($('.hljs')[0]);

動くサンプル

html
1<html>
2<head>
3<meta charset="UTF-8" />
4<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
5<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
6<script>
7$(function() {
8var cp = new Clipboard($('.hljs')[0]);
9  cp.on('success', function(e) {
10    alert('success');
11  });
12});
13</script>
14</head>
15
16<body>
17<pre class="html hljs xml" id="hljs" data-clipboard-target="#hljs">
18 テスト
19</pre>
20</body>
21</html>

(追記)

JSFiddle上にも動くサンプルを作ってみました。

投稿2016/11/23 00:59

編集2016/11/23 02:34

popobot

総合スコア6586

2001Y

2016/11/23 01:13

返信ありがとうございます。それでもできないのですが、clipboard.jsを読み込むのはヘッダーでなければいけないのでしょうか。

popobot

2016/11/23 01:57

ヘッダーでなくてもできると思いますよ... うまくいかないコードを掲載していただければコメントできるかもしれません。

2001Y

2016/11/23 02:14

わかりましたありがとうございます。

行動規範の内容に同意します

誰をベストアンサーにすればいいのか迷いましたが、無事解決できて本当に感謝です。
一様コードは載せておきます。
JSFiddle

投稿2016/11/23 14:56

2001Y

総合スコア83

HTML
1<pre class="css">
2body {
3 font-family: 'Rounded-M+', 'Hiragino Kaku Gothic ProN', Helvetica, Arial, sans-serif;
4 color: #333333;
5 word-wrap: break-word;
6}
7</pre>

▲自分で入力するコードです。

JavaScript
1$('pre').attr("id", "hljs");
2$('pre').attr("data-clipboard-target", "#hljs");
3
4$(document).ready(function() {
5  $('pre').each(function(i, block) {
6    hljs.highlightBlock(block);
7  });
8});
9
10$(function() {
11  var cp = new Clipboard($('.hljs')[0]);
12  cp.on('success', function(e) {
13    alert('success');
14  });
15});

▲idやらclassやらはJavaScriptで追加しています。

これでもできないのですがどうすれば良いのでしょうか。

icchii様を見てJSFiddleにつくってみました。

（追記）URL変更
https://jsfiddle.net/2001Y/reamhmtb/6/

投稿2016/11/23 14:18

編集2016/11/24 10:00

2001Y

総合スコア83

kei344

2016/11/23 14:24 編集

clipboard.js を呼んでないからでは？ https://jsfiddle.net/reamhmtb/

2001Y

2016/11/23 14:38

圧縮された方ですが組み込んでありますよ！ http://q2.upup.be/f/r/Pyxmt1S9TW.png

kei344

2016/11/23 14:43

ご自分で貼ったリンクを再確認してください。貼り間違いでもしたのでは？

2001Y

2016/11/23 14:52

あ。。。申し訳ないです。。。何をしているんだか。。

kei344

2016/11/23 14:55

コメントで提示したURLで、動いてそうなのですが、求める挙動と違いますか？

2001Y

2016/11/23 14:57

いえその通りです。ありがとうございました！！

行動規範の内容に同意します

simocheeさんのコードと併せて考えていただけるのであれば

javascript
1element.addEventListener("mousedown" , MouseDownFunc);
2```で、elementがクリックされたときに反応します。
3タップの場合は
4```javascript
5element.addEventListener("touchstart", touchHandler);
6```ですね。

投稿2016/11/23 04:25

Diawel

総合スコア190

2001Y

2016/11/23 14:12

ありがとうごいます。

行動規範の内容に同意します

別にボタンがあり、それを押したらコピーするというようにするのなら、以下のようにして実装できます。

html
1<button id="copy" data-clipboard-text="">Copy</button>
2
3<pre id="code">
4  <body>
5    <!-- ... -->
6  <body>
7</pre>

javascript
1const $code = document.getElementById('code');
2const $btn = document.getElementById('copy');
3
4document.addEventListener('DOMContentLoaded', (e) => {
5  const code = $code.innerHTML;
6  $btn.setAttribute('data-clipboard-text', code);
7});