Klik op de knop te kopiëren naar klembord met behulp van jQuery
Hoe kopieer ik de tekst in een div naar het klembord? Ik heb een div en moet een link toevoegen die de tekst naar het klembord kopieert. Is hier een oplossing voor?
<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>
Nadat ik op copy text heb geklikt en vervolgens op Ctrl + V heb gedrukt, moet het geplakt worden.
401
3
Er is een andere niet-Flash manier (afgezien van de Clipboard API genoemd in jfriend00's antwoord). U moet de tekst selecteren en dan het commando
copy
uitvoeren om naar het klembord te kopiëren welke tekst op dat moment op de pagina is geselecteerd.Bijvoorbeeld, deze functie zal de inhoud van het doorgegeven element naar het klembord kopiëren (bijgewerkt met suggestie in de commentaren van PointZeroTwo):
Dit is hoe het werkt:
document.execCommand("copy")
.Een snelle demo kunt u hier zien:
Het belangrijkste probleem is dat niet alle browsers ondersteunen deze functie op dit moment, maar je kunt het gebruiken op de belangrijkste uit:
Update 1: Dit kan ook bereikt worden met een pure JavaScript oplossing (geen jQuery):
Merk op dat we nu de id doorgeven zonder de #.
Zoals madzohan gemeld in de opmerkingen hieronder, is er een aantal vreemde probleem met de 64-bits versie van Google Chrome in sommige gevallen (het uitvoeren van het bestand lokaal). Dit probleem lijkt te zijn opgelost met de niet-jQuery oplossing hierboven.
Madzohan probeerde het in Safari en de oplossing werkte, maar met
document.execCommand('SelectAll')
in plaats van met.select()
(zoals aangegeven in de chat en in de opmerkingen hieronder).Zoals PointZeroTwo in de commentaren opmerkt, kan de code verbeterd worden zodat het een succes/falen resultaat zou teruggeven. Je kunt een demo zien op [deze jsFiddle][7].
UPDATE: KOPIE MET BEHOUD VAN DE TEKSTOPMAAK
Zoals een gebruiker in de Spaanse versie van StackOverflow opmerkte, werken de hierboven genoemde oplossingen perfect als je de inhoud van een element letterlijk wilt kopiëren, maar ze werken niet'geweldig als je de gekopieerde tekst met opmaak wilt plakken (omdat het in een
input type="text"
wordt gekopieerd, gaat de opmaak "verloren").Een oplossing hiervoor zou zijn om te kopiëren naar een inhoud bewerkbare
div
en dan te kopiëren met behulp van deexecCommand
op een vergelijkbare manier. Hier is een voorbeeld - klik op de kopieer knop en plak dan in het inhoud bewerkbare vak hieronder:En in jQuery, zou het als volgt zijn:
Uitgave vanaf 2016
Vanaf 2016 kunt u nu in de meeste browsers tekst naar het klembord kopiëren omdat de meeste browsers de mogelijkheid hebben om programmatisch een selectie tekst naar het klembord te kopiëren met
document.execCommand("copy")
dat van een selectie werkt.Net als met sommige andere acties in een browser (zoals het openen van een nieuw venster), kan het kopiëren naar het klembord alleen worden gedaan via een specifieke gebruikersactie (zoals een muisklik). Het kan bijvoorbeeld niet via een timer worden gedaan.
Hier's een code voorbeeld:
Hier's een iets meer geavanceerde demo: https://jsfiddle.net/jfriend00/v9g1x0o6/
En, je kunt ook een vooraf gebouwde bibliotheek krijgen die dit voor je doet met clipboard.js.
Old, historisch deel van antwoord
Rechtstreeks naar het klembord kopiëren via JavaScript wordt door geen enkele moderne browser toegestaan om veiligheidsredenen. De meest gebruikelijke workaround is het gebruik van een Flash-mogelijkheid voor het kopiëren naar het klembord die alleen kan worden geactiveerd door een directe klik van de gebruiker.
Zoals reeds vermeld, ZeroClipboard is een populaire set code voor het beheren van het Flash object om het kopiëren te doen. Ik'heb het gebruikt. Als Flash is geïnstalleerd op het browse-apparaat (wat mobiel of tablet uitsluit), werkt het.
De volgende meest voorkomende work-around is om gewoon de klembord-gebonden tekst in een invoerveld te plaatsen, de focus naar dat veld te verplaatsen en de gebruiker te adviseren om op Ctrl + C te drukken om de tekst te kopiëren.
Andere discussies over het probleem en mogelijke work-arounds zijn te vinden in deze eerdere Stack Overflow posts:
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
Hoe kun je naar klembord kopiëren zonder Flash?
Deze vragen die vragen om een modern alternatief voor het gebruik van Flash hebben veel vraag upvotes gekregen en geen antwoorden met een oplossing (waarschijnlijk omdat er geen bestaan):
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 en Firefox hadden vroeger niet-standaard API's voor toegang tot het klembord, maar de modernere versies hebben deze methoden (waarschijnlijk om veiligheidsredenen) afgeschreven.
Er is een ontluikende poging tot standaarden om te proberen met een "safe" manier te komen om de meest voorkomende klembord problemen op te lossen (die waarschijnlijk een specifieke gebruikersactie vereist zoals de Flash-oplossing vereist), en het lijkt erop dat het gedeeltelijk geïmplementeerd kan zijn in de nieuwste versies van Firefox en Chrome, maar ik heb dat nog niet bevestigd.
De tekst die gekopieerd moet worden staat in de tekst invoer, zoals:
<input type="text" id="copyText" name="copyText">
en, op knop klikken bovenstaande tekst moet gekopieerd worden naar clipboard,dus knop is als:Copy
Je script zou er zo uit moeten zien:Voor CDN-bestanden
note:
ZeroClipboard.swf
enZeroClipboard.js
" bestand moet in dezelfde map staan als je bestand dat deze functionaliteit gebruikt, OF je moet zoals wij<script src=""></script>
includen op onze pagina's.