Vairāk
Noklikšķiniet uz pogas kopēt uz starpliktuvi, izmantojot jQuery
Kā kopēt divdaļā esošo tekstu uz starpliktuvi? Man ir divsadaļa, un man ir nepieciešams pievienot saiti, kas pievienos tekstu starpliktuvē. Vai tam ir kāds risinājums?
<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>
Pēc tam, kad es noklikšķinu uz kopēt tekstu, pēc tam nospiežu Ctrl + V, tas ir jāielīmē.
401
3
Ir vēl viens veids, kas nav saistīts ar Flash (izņemot Clipboard API, kas minēts jfriend00's atbildē). Jums ir jāizvēlas teksts un pēc tam jāizpilda komanda
copy
, lai kopētu uz starpliktuvi jebkuru tekstu, kas pašlaik ir atlasīts lapā.Piemēram, šī funkcija nokopēs starpliktuves elementa saturu starpliktuvē (papildināts ar PointZeroTwo komentāros izteikto ieteikumu):
Tas darbojas šādi:
document.execCommand("copy")
.Jūs varat apskatīt īsu demonstrāciju šeit:
Galvenā problēma ir tā, ka pašlaik ne visas pārlūkprogrammas atbalsta šo funkciju, bet jūs varat to izmantot galvenajās pārlūkprogrammās no:
Atjauninājums 1: To var panākt arī ar tīru JavaScript risinājumu (bez jQuery):
Ievērojiet, ka tagad mēs nododam id bez #.
Kā madzohan ziņoja komentāros zemāk, dažos gadījumos (palaižot failu lokāli) ir kāda dīvaina problēma ar Google Chrome 64 bitu versiju. Šķiet, ka šī problēma ir novērsta, izmantojot iepriekš minēto risinājumu, kas nav jQuery.
Madzohan izmēģināja Safari, un risinājums darbojās, bet, izmantojot
document.execCommand('SelectAll')
, nevis izmantojot.select()
(kā norādīts tērzēšanā un komentāros zemāk).Kā komentāros norāda PointZeroTwo, kodu varētu uzlabot, lai tas atgrieztu veiksmīgu/neveiksmīgu rezultātu. Demonstrējumu var apskatīt [šajā jsFiddle][7].
ATJAUNINĀJUMS: KOPIJA, SAGLABĀJOT TEKSTA FORMĀTU
Kā norādīja lietotājs StackOverflow spāņu valodas versijā, iepriekš minētie risinājumi darbojas lieliski, ja vēlaties burtiski kopēt elementa saturu, bet tie nedarbojas tik labi, ja vēlaties ievietot kopēto tekstu ar formātu (tā kā tas tiek kopēts
input type="text"
, formāts tiek "zaudēts").Risinājums tam būtu kopēt saturu rediģējamā
div
un pēc tam kopēt to, izmantojotexecCommand
līdzīgā veidā. Šeit ir piemērs - noklikšķiniet uz kopēšanas pogas un pēc tam ielīmējiet satura rediģējamajā lodziņā zemāk:Un jQuery tas būtu šādi:
Editēts 2016. gadā
No 2016. gada teksta kopēšanu uz starpliktuvi tagad var veikt lielākajā daļā pārlūkprogrammu, jo lielākajā daļā pārlūkprogrammu ir iespēja programmatiski kopēt teksta izlasi uz starpliktuvi, izmantojot
document.execCommand("copy")
, kas darbojas pēc atlases.Tāpat kā dažas citas darbības pārlūkprogrammā (piemēram, jauna loga atvēršana), arī kopēšanu uz starpliktuvi var veikt tikai ar konkrētu lietotāja darbību (piemēram, peles klikšķi). Piemēram, to nevar izdarīt, izmantojot taimeri.
Lūk, koda piemērs:
Lūk, mazliet sarežģītāka demonstrācija: https://jsfiddle.net/jfriend00/v9g1x0o6/.
Jūs varat arī iegūt jau iepriekš izveidotu bibliotēku, kas to dara jūsu vietā, izmantojot clipboard.js.
Sena, vēsturiska atbildes daļa
Tiešā kopēšana uz starpliktuvi, izmantojot JavaScript, nav atļauta nevienā mūsdienu pārlūkprogrammā drošības apsvērumu dēļ. Visizplatītākais risinājums ir izmantot Flash funkciju kopēšanai uz starpliktuvi, ko var aktivizēt tikai ar tiešu lietotāja klikšķi.
Kā jau minēts, ZeroClipboard ir populārs kodu kopēšanas veikšanai paredzētais Flash objekta pārvaldības komplekts. Es to esmu izmantojis. Ja pārlūkošanas ierīcē ir instalēta Flash (kas izslēdz mobilos vai planšetdatorus), tas darbojas.
Nākamais izplatītākais risinājums ir vienkārši ievietot starpliktuvē ievietoto tekstu ievades laukā, pārvietot fokusu uz šo lauku un ieteikt lietotājam nospiest Ctrl + C, lai kopētu tekstu.
Citas diskusijas par šo problēmu un iespējamiem tās apiešanas veidiem ir atrodamas šajos iepriekšējos Stack Overflow ziņojumos:
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
Kā kopēt uz starpliktuvi bez Flash?
Šie jautājumi, kuros tiek prasīta mūsdienīga alternatīva Flash izmantošanai, ir saņēmuši daudz augšupvērstu balsu, bet atbilžu ar risinājumu nav (iespējams, tāpēc, ka tādu nav):
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 un Firefox izmantoja nestandarta API piekļuvei starpliktuvei, taču to modernākajās versijās šīs metodes ir atceltas (iespējams, drošības apsvērumu dēļ).
Ir veikts topošais standartizācijas darbs, lai mēģinātu izstrādāt "drošu" veidu, kā risināt visbiežāk sastopamās starpliktuves problēmas (iespējams, ka ir nepieciešama īpaša lietotāja darbība, līdzīgi kā Flash risinājums), un, šķiet, ka tas varētu būt daļēji īstenots jaunākajās Firefox un Chrome versijās, bet es to vēl neesmu apstiprinājis.
Kopējamais teksts ir teksta ievades laukā,piemēram:
<input type="text" id="copyText" name="copyText">
un, noklikšķinot uz pogas virs teksta, teksts jākopē uz starpliktuvi, tāpēc poga ir šāda:Copy
Jūsu skripts būtu šāds:CDN failiem
note: failiem
ZeroClipboard.swf
unZeroClipboard.js
" jābūt tajā pašā mapē, kurā ir jūsu fails, kas izmanto šo funkcionalitāti, VAI jums ir jāiekļauj, kā mēs iekļaujam<script src="""></script>
mūsu lapās.