Copiați în clipboard prin
Pe site-ul Bit.ly are un buton similar pentru a copia URL-uri scurte. Acesta are un conținut care este ușor de copiat. Dar, în astfel de cazuri, este foarte ușor de utilizat acest buton.
Anterior adăuga acest buton a fost foarte dificil, toate din cauza interdicției de browsere. Majoritatea dezvoltatorilor au trebuit să folosească biblioteci, cum ar fi Flash Clippy. Din fericire pentru noi, avem acum o bibliotecă JS care facilitează această sarcină. Și Clipboard.js. În acest tutorial pentru începători vă voi arăta cum să utilizați în mod eficient acest instrument.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Pentru a instala Clipboard.js, trebuie să descărcați fișierul în folderul corespunzător de pe site-ul și să ofere un link către acesta în document. Sau puteți da un link la CDN, adăugați link-ul de mai jos în codul HTML al paginii
Avem nevoie de a crea două elemente. O țintă pentru stocarea conținutului copiat. Elementul țintă poate fi, de exemplu, de intrare (cu ID), cuprinzând scurt URL:
Al doilea element este un flip-flop. În cazul nostru - butonul. Declanșatorul specifică datele atribut de date clipboard-țintă. Valoarea este dată de ID-ul elementului dorit:
După adăugarea acestor două elemente într-un aspect al paginii poate include Clipboard.js. Pentru a face acest lucru, adăugați următorul cod între etichetele script sau pentru a conecta codul într-un fișier separat.
Gata! Făcând clic pe butonul de acum suntem capabili de a copia URL scurt.
extinde oportunitățile
În unele situații pur și simplu nu pot fi adăugate la elementul țintă ID-ul, clasa sau atribut * a datelor - atunci când se lucrează cu conținutul vechi sau cu mai multe elemente de țintă se poate întâmpla orice.
Ca un exemplu, avem un site web. Conținutul site-ul este format din secțiuni de fragmente de text și cod. Pentru sintaxa vom folosi excelent PrismJS bibliotecii. Dar PrismJS nici un buton „copie“, și vrem să-l adăugați prin utilizarea Clipboard.js. Dar problema este că avem sute de pagini cu astfel de conținut online. Aici vom ajuta Clipboard.js API.
Aruncati o privire la API
În Clipboard.js există două lucruri: succes și eroare. Evenimente verifica succesul sau eșecul a conținutului a fost copiat. În Safari, cel mai probabil, va continua să opereze un eveniment de eroare, deoarece browser-ul nu acceptă copia / tăiat a metodei ExecCommand, care se bazează pe Clipboard.js. Eveniment returnează următoarele proprietăți:
Text: succes eveniment tocmai a revenit. Proprietatea de text sunt stocate, copiate sau tăiate din elementul țintă.
declanșare: se întoarce de declanșare, care copiază sau text tăiat.
API-ul vă permite să încorporați Clipboard.js în site-ul nostru fără a schimba aspectul, nu este necesar să se schimbe elemente ale învelișului. În cazul nostru, le putem folosi pentru a adăuga butonul „copie“ la codul de.
Clipboard.js + PrismJS
În această etapă ar trebui să fie instalate deja PrismJS (descărcați fișierul într-un dosar de pe site-ul și să ofere un link la acesta). Fiecare bucată de cod în marcajul nostru este plasat în tag-uri pre și cod dintr-o clasă de language-. În exemplul nostru, vom folosi codul de mai puțin, și anume, trebuie să adăugați o clasă de limbaj mai puțin:
Copiați butonul de adăugare
Acum, pentru a copia piesa relevantă de cod trebuie să fie adăugate la fiecare buton etichetă de pre. Pentru început, vom găsi toate etichetele pre folosind metoda getElementsByTagName.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Avem două sau mai multe etichete pre. Este necesar să se plimbe prin fiecare element în buclă.
Pentru a adăuga un buton, adăugați următorul cod în bucla pentru.
Acum, acest buton trebuie să fie afișate în fiecare bucată de cod:
rula Clipboard
Butonul nostru este acum pe deplin operațională. Făcând clic pe ea, codul trebuie să fie copiat. Să mergem puțin mai departe și de a lucra cu evenimente personalizate.
Lucrăm cu evenimente personalizate
Să presupunem că vrem să adăugați un pic de interactivitate în procesul de copiere a conținutului. După copierea cu succes a textului, dorim să schimbați textul butonul „Copiere“ pentru „selectat“. Pentru a face acest lucru, adăugați următorul cod:
Codul de mai sus execută 3 pași:
La început, vom purifica proba utilizând funcția Clipboard clearSelection (). Opțional.
Apoi, modificați setarea la „selectat“
După 2 secunde, a reveni valoare este „Copiere“.
Pentru o eroare eveniment în browserele care nu acceptă metoda ExecCommand, cum ar fi Safari (ca din acest scris), vom schimba textul la „Apăsați» «CTRL + C». Adăugați codul de mai jos:
Asta este! Avem acum o copie buton de text complet de lucru și interactiv. Trebuie doar să-l stil. Coped cu această sarcină ei înșiși.
concluzie
Clipboard.js Biblioteca - un instrument foarte util, care permite aproape fără vărsare de sânge adăuga la o pagină web, faceți clic „Copiere“. In acest tutorial, am acoperit elementele de bază și îmbunătățit ușor cheia noastră cu evenimentele API și personalizate.
In Clipboard.js utilizate metode de selecție și ExecCommand, adică Metoda noastră va funcționa numai în browsere care acceptă aceste două metode: Chrome 42, Firefox 41, Internet Explorer 9 și Opera 9. Așa cum sa menționat mai sus, utilizatorii de Safari până în prezent nici noroc. Sper că va plăcut acest tutorial și nu uitați despre demo.
Revizie: Echipa webformyself.
Tehnologii moderne de dezvoltare web
AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
