Come faccio a copiare il testo all'interno di un div negli appunti? Ho un div e ho bisogno di aggiungere un link che aggiunga il testo agli appunti. C'è una soluzione per questo?
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
Dopo aver cliccato su copia testo, poi premo Ctrl + V, deve essere incollato.
C'è un altro modo non-Flash (a parte la Clipboard API menzionata nella risposta di jfriend00's). È necessario selezionare il testo e poi eseguire il comando copy
per copiare negli appunti il testo attualmente selezionato nella pagina.
Per esempio, questa funzione copierà negli appunti il contenuto dell'elemento passato (aggiornato con il suggerimento nei commenti di PointZeroTwo):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Ecco come funziona:
document.execCommand("copy")
.Potete vedere una rapida dimostrazione 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 non tutti i browser supportano questa funzione al momento, ma puoi usarla sui principali da:
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" />
Notate che ora passiamo l'id senza il #.
Come riportato da madzohan nei commenti qui sotto, c'è qualche strano problema con la versione a 64 bit di Google Chrome in alcuni casi (eseguendo il file in locale). Questo problema sembra essere risolto con la soluzione non-jQuery di cui 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 PointZeroTwo fa notare nei commenti, il codice potrebbe essere migliorato in modo da restituire un risultato di successo/fallimento. Potete vedere una demo su [questo jsFiddle][7].
Come un utente ha fatto notare nella versione spagnola di StackOverflow, le soluzioni elencate sopra funzionano perfettamente se si vuole copiare letteralmente il contenuto di un elemento, ma non funzionano così bene se si vuole incollare il testo copiato con formato (poiché viene copiato in un input type="text"
, il formato è "perso").
Una soluzione per questo sarebbe quella di copiare in un div
modificabile nel contenuto e poi copiarlo usando il execCommand
in un modo simile. Qui c'è un esempio - clicca sul pulsante copia e poi incolla nella casella editabile del contenuto qui sotto:
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 come questo
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>
Modifica del 2016
A partire dal 2016, è ora possibile copiare il testo negli appunti nella maggior parte dei browser perché la maggior parte dei browser ha la capacità di copiare programmaticamente una selezione di testo negli appunti usando document.execCommand("copy")
che funziona da una selezione.
Come con alcune altre azioni in un browser (come aprire una nuova finestra), la copia negli appunti può essere fatta solo tramite una specifica azione dell'utente (come un clic del mouse). Per esempio, non può essere fatto tramite un timer.
Ecco un esempio di codice:
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
input {
width: 400px;
}
<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">
Ecco una demo un po' più avanzata:
E puoi anche ottenere una libreria pre-costruita che fa questo per te con clipboard.js.
Vecchia parte storica della risposta
Copiare direttamente negli appunti tramite JavaScript non è permesso da nessun browser moderno per motivi di sicurezza. Il workaround più comune è quello di utilizzare una funzionalità Flash per la copia negli appunti che può essere attivata solo da un clic diretto dell'utente.
Come già detto, ZeroClipboard è un popolare insieme di codice per gestire l'oggetto Flash per fare la copia. Io l'ho usato. Se Flash è installato sul dispositivo di navigazione (il che esclude i cellulari o i tablet), funziona.
Il prossimo work-around più comune è semplicemente mettere il testo legato agli appunti in un campo di input, spostare il focus su quel campo e avvisare l'utente di premere Ctrl + C per copiare il testo.
Altre discussioni sul problema e possibili work-around si possono trovare in questi post precedenti di Stack Overflow:
https://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript
https://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery
Queste domande che chiedono un'alternativa moderna all'uso di Flash hanno ricevuto molti voti e nessuna risposta con una soluzione (probabilmente perché non ne esistono):
https://stackoverflow.com/questions/6355300/copy-to-clipboard-without-flash
Internet Explorer e Firefox avevano delle API non standard per accedere agli appunti, ma le loro versioni più moderne hanno deprecato questi metodi (probabilmente per ragioni di sicurezza).
C'è uno sforzo nascente sugli standard per cercare di trovare un modo "sicuro" per risolvere i problemi più comuni degli appunti (probabilmente richiedendo un'azione specifica dell'utente come richiede la soluzione Flash), e sembra che possa essere parzialmente implementato nelle ultime versioni di Firefox e Chrome, ma non l'ho ancora confermato.
Il testo da copiare è in un input di testo, come: <input type="text" id="copyText" name="copyText">
e, al clic del pulsante sopra il testo dovrebbe essere copiato negli appunti, quindi il pulsante è come:<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>
Il tuo script dovrebbe essere come:
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
Per i file CDN
nota: ZeroClipboard.swf
e ZeroClipboard.js
" il file dovrebbe essere nella stessa cartella in cui si trova il tuo file che usa questa funzionalità, OPPURE devi includere come noi includiamo <script src=""/script>
nelle nostre pagine.