Klik på knappen kopiere til udklipsholder ved hjælp af jQuery
Hvordan kopierer jeg teksten i en div til udklipsholderen? Jeg har en div og skal tilføje et link, som vil tilføje teksten til udklipsholderen. Er der en løsning til dette?
<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>
Når jeg klikker på kopiere tekst, og derefter trykker jeg på Ctrl + V, skal den indsættes.
401
3
Der er en anden måde uden Flash (ud over Clipboard API, der er nævnt i jfriend00's svar). Du skal markere teksten og derefter udføre kommandoen
copy
for at kopiere den tekst, der i øjeblikket er markeret på siden, til udklipsholderen.Denne funktion vil f.eks. kopiere indholdet af det overgivne element til udklipsholderen (opdateret med forslag i kommentarerne fra PointZeroTwo):
Sådan fungerer det:
document.execCommand("copy")
.Du kan se en hurtig demo her:
Hovedproblemet er, at ikke alle browsere understøtter denne funktion i øjeblikket, men du kan bruge den på de vigtigste fra:
Opdatering 1: Dette kan også opnås med en ren JavaScript-løsning (ingen jQuery):
Bemærk, at vi overfører id'et uden # nu.
Som madzohan rapporterede i kommentarerne nedenfor, er der i nogle tilfælde et eller andet mærkeligt problem med 64-bit versionen af Google Chrome (ved at køre filen lokalt). Dette problem ser ud til at være løst med den ikke-JQuery-løsning ovenfor.
Madzohan prøvede i Safari, og løsningen virkede, men ved at bruge
document.execCommand('SelectAll')
i stedet for at bruge.select()
(som angivet i chatten og i kommentarerne nedenfor).Som PointZeroTwo påpeger i kommentarerne, kunne koden forbedres, så den returnerer et resultat af succes/fejlslag. Du kan se en demo på [denne jsFiddle][7].
OPDATERING: KOPI BEHOLDER TEKSTFORMATET
Som en bruger påpegede i den spanske version af StackOverflow, fungerer ovenstående løsninger perfekt, hvis du ønsker at kopiere indholdet af et element bogstaveligt, men de fungerer ikke så godt, hvis du ønsker at indsætte den kopierede tekst med format (da den kopieres ind i en
input type="text"
, går formatet "tabt").En løsning på det ville være at kopiere ind i en indholdsredigerbar
div
og derefter kopiere den ved hjælp afexecCommand
på en lignende måde. Her er der et eksempel - klik på knappen Kopier og indsæt derefter i det indholdsredigerbare felt nedenfor:Og i jQuery ville det være sådan her:
Redigeret fra 2016
Fra 2016 kan du nu kopiere tekst til udklipsholderen i de fleste browsere, fordi de fleste browsere har mulighed for programmatisk at kopiere et udvalg af tekst til udklipsholderen ved hjælp af
document.execCommand("copy")
, der fungerer ud fra et udvalg.Som med nogle andre handlinger i en browser (f.eks. åbning af et nyt vindue) kan kopiering til udklipsholderen kun foretages via en specifik brugerhandling (f.eks. et museklik). Det kan f.eks. ikke gøres via en timer.
Her er et kodeeksempel:
Her er en lidt mere avanceret demo: https://jsfiddle.net/jfriend00/v9g1x0o6/
Og du kan også få et præfabrikeret bibliotek, der gør dette for dig med clipboard.js.
Gammel, historisk del af svaret
Direkte kopiering til udklipsholderen via JavaScript er ikke tilladt i nogen moderne browser af sikkerhedshensyn. Den mest almindelige løsning er at bruge en Flash-funktion til kopiering til udklipsholderen, som kun kan udløses af et direkte klik fra brugeren.
Som allerede nævnt er ZeroClipboard et populært sæt kode til styring af Flash-objektet til at foretage kopieringen. Jeg har selv brugt det. Hvis Flash er installeret på browserenheden (hvilket udelukker mobil eller tablet), virker det.
Den næstmest almindelige work-around er blot at placere den udklipsholderbundne tekst i et indtastningsfelt, flytte fokus til dette felt og råde brugeren til at trykke Ctrl + C for at kopiere teksten.
Andre diskussioner af problemet og mulige løsninger kan findes i disse tidligere Stack Overflow-indlæg:
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
Disse spørgsmål, der spørger efter et moderne alternativ til Flash, har fået mange upvotes, men ingen svar med en løsning (sandsynligvis fordi der ikke findes nogen):
https://stackoverflow.com/questions/10729570/html5-alternative-to-flash-based-zeroclipboard-for-safe-copying-of-data-to-clipb
https://stackoverflow.com/questions/6355300/copy-to-clipboard-without-flash
Internet Explorer og Firefox havde tidligere ikke-standardiserede API'er til at få adgang til udklipsholderen, men de nyere versioner har forældet disse metoder (sandsynligvis af sikkerhedshensyn).
Der er en begyndende standardiseringsindsats for at forsøge at finde en "sikker" måde at løse de mest almindelige problemer med udklipsholdere på (sandsynligvis kræver det en specifik brugerhandling, ligesom Flash-løsningen kræver), og det ser ud til, at den måske er delvist implementeret i de nyeste versioner af Firefox og Chrome, men jeg har ikke bekræftet det endnu.
Den tekst, der skal kopieres, er i tekstindtastning, som f.eks: Det er en tekstindtastning i teksten, som f.eks:Så det skal være sådan, at knappen skal være som:
Copy
Dit script skal være som:For CDN-filer
note: filen skal ligge i samme mappe som din fil, der bruger denne funktionalitet, ELLER du skal inkludere, som vi inkluderer
<script src="""></script>
på vores sider.