Copia testo span usando Clipboard.js

Question

Sto usando clipboard.js e ho bisogno di copiare il testo in uno span facendo clic su un pulsante. C'è un modo per fare questo?

HTML:

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

Answer 1

Una soluzione può essere:

// 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

sto ancora imparando JS mia auto Tuttavia, ho trovato questo sul clipboard.js github here. vorrei fatto questo un commento ma non ho il rappresentante.

<!-- 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> 

ive anche mai visto tasto tipo di ingresso prima di così sembrava sulla rete Mozilla sviluppatore here e si dice che "... E 'stato sostituito in HTML5 dall'elemento.". Quindi potrei esaminarlo in quanto sembra essere un modo migliore di farlo.

Answer 3

avrete solo bisogno di creare un'istanza di un nuovo Appunti. In questo caso dovresti scrivere new Clipboard(".buttonClass") perché questa è la classe del tuo pulsante. Il markup che hai fornito era completamente funzionale altrimenti. Ho creato un JSFiddle che è possibile visualizzare here.

Se hai altri problemi, ho trovato il clipboard.js docs molto utile.