Clipboard.jsを使用してスパンテキストをコピー

Question

私はclipboard.jsを使用しており、ボタンをクリックしてスパン内のテキストをコピーする必要があります。これを行う方法はありますか？

HTML：

<span id="spanId">text here</span> 
<input type="button" class="buttonClass" value="Copy" data-clipboard-target="#spanId" /> 

Answer 1

ソリューションをすることができます：

// create a new instance of Clipboard plugin for the button element 
 
// using the class selector: .buttonClass 
 
var clipboard = new Clipboard('.buttonClass'); 
 

 

 
// when text is copied into clipboard use it 
 
clipboard.on('success', function(e) { 
 
    $('#log').text('Text copied into clipboard is: <' + e.text + '>'); 
 
    e.clearSelection(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> 
 

 
<span id="spanId">text here</span> 
 
<input type="button" class="buttonClass" value="Copy" data-clipboard-target="#spanId"/> 
 
<p id="log"></p>

Answer 2

私はまだしかし、私はclipboard.jsのgithubのhere上でこれを見つけたJS私の自己を学んでいます。私はこれをコメントにしましたが、担当者はいません。

<!-- Target --> 
<span id="spanId">text here</span> 
<!-- Trigger --> 
<button class="btn" data-clipboard-target="#spanId"> 
<img src="assets/clippy.svg" alt="Copy to clipboard"> 
</button> 

ので、Mozillaの開発者ネットワークhereに見て、それがいることを言う前に、IVEは、入力タイプのボタンを見たことがない「...それは要素によってHTML5に取って代わられました。」。だから私はおそらくそれを行うより良い方法であるように見えるだろう。

Answer 3

あなただけの新しいクリップボードをインスタンス化する必要があります。この場合、new Clipboard(".buttonClass")と書いてあります。なぜなら、これはあなたのボタンが持つクラスだからです。あなたが提供したマークアップは、そうでなければ完全に機能していました。私はあなたが見ることができるJSFiddleを作ったhere。

他に問題がある場合は、clipboard.js docsが非常に役立つことがわかりました。