Aggiornamento 2020 : questa soluzione utilizza execCommand. Mentre quella funzionalità andava bene al momento di scrivere questa risposta, ora è considerata obsoleta . Funzionerà ancora su molti browser, ma il suo utilizzo è sconsigliato in quanto il supporto potrebbe essere interrotto.
Esiste un altro modo non Flash (a parte l' API degli Appunti menzionata nella risposta di jfriend00 ). È necessario selezionare il testo e quindi eseguire il comandocopy per copiare negli appunti qualunque testo sia attualmente selezionato sulla pagina.
Ad esempio, questa funzione copierà il contenuto dell'elemento passato negli appunti (aggiornato con suggerimenti nei commenti da PointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Ecco come funziona:
- Crea un campo di testo temporaneamente nascosto.
- Copia il contenuto dell'elemento in quel campo di testo.
- Seleziona il contenuto del campo di testo.
- Esegue la copia del comando come:
document.execCommand("copy") .
- Rimuove il campo di testo temporaneo.
Puoi vedere una breve demo qui:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Il problema principale è che al momento non tutti i browser supportano questa funzione, ma puoi usarla su quelle principali da:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
Aggiornamento 1: questo può essere ottenuto anche con una soluzione JavaScript pura (senza jQuery):
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Si noti che ora passiamo l'id senza #.
Come riportato da madzohan nei commenti qui sotto, in alcuni casi c'è qualche strano problema con la versione a 64 bit di Google Chrome (che esegue il file localmente). Questo problema sembra essere stato risolto con la soluzione non jQuery sopra.
Madzohan ha provato in Safari e la soluzione ha funzionato ma usando document.execCommand('SelectAll')invece di usare .select()(come specificato nella chat e nei commenti sotto).
Come sottolinea PointZeroTwo nei commenti , il codice potrebbe essere migliorato in modo da restituire un risultato di successo / fallimento. Puoi vedere una demo su questo jsFiddle .
AGGIORNAMENTO: COPIA MANTENENDO IL FORMATO TESTO
Come ha sottolineato un utente nella versione spagnola di StackOverflow , le soluzioni sopra elencate funzionano perfettamente se si desidera copiare il contenuto di un elemento letteralmente, ma non funzionano così bene se si desidera incollare il testo copiato con il formato (come viene copiato in un input type="text", il formato è "perso").
Una soluzione per questo sarebbe quella di copiare in un contenuto modificabile dive quindi copiarlo usando execCommandin modo simile. Ecco un esempio: fai clic sul pulsante Copia, quindi incolla nella casella modificabile del contenuto di seguito:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
E in jQuery, sarebbe così:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>