Javascript - copierea în clipboard folosind șeful IT
În acest articol vom considera scenariul clipboard.js. care pot fi utilizate pentru a organiza copierea unor conținut web în clipboard.
clipboard.js - script js pentru a copia text în clipboard
Clipboard.js - un script modern, care este folosit pentru a permite utilizatorului să copieze mai ușor (de exemplu, prin apăsarea unui buton), unele dintre informațiile furnizate pe pagina web în clipboard. Activitatea acestui scenariu se bazează pe API-ul de selecție și ExecCommand.
Script-ul funcționează în browserele Chrome 42+, 41+ Firefox, IE 9+ Opera 29+, Safari 8.
Beneficii clipboard.js script:
- Ea nu are nevoie de Flash (cum ar fi ZeroClipboard) pentru munca lor.
- Nu are dependențe, care este, Aceasta nu necesită prezența operelor sale, inclusiv biblioteca jQuery.
- Ea are o dimensiune foarte mică.
Elemente de bază clipboard.js
Descarcă zip-fișier, dezarhivează-l și copiați fișierul pe site-ul director clipboard.min.js dorit.
Conectați fișierul clipboard.min.js la pagina dorită pe site.
Inițializa Clipboard pentru elementele necesare pe pagina prin trimiterea acesteia DOM-selector, HTML element sau o listă constând din HTML-elemente. Ie funcția constructor de elemente de transfer Clipboard necesare clic pe informațiile care vor fi copiate în clipboard.
De exemplu, inițializa Clipboard pentru toate elementele de pe pagină cu o clasă de .btn-clipboard.
Adăugați DATA- * atribute inițializate elemente HTML.
Luați în considerare următoarele opțiuni:
2. Decuparea textului dintr-un alt element de
Exemplu de creare a unui buton pentru copierea datelor în clipboard
Să considerăm un exemplu în care se va crea un buton pentru elementul de pre. când faceți clic, conținutul acestui element (pre) vor fi copiate în clipboard.
Caracteristici suplimentare clipboard.js
Luați în considerare principalele caracteristici oferite clipboard.js js-script.
Evenimente clipboard.js
Acțiuni atunci când copierea de informații în clipboard pot fi urmărite folosind evenimente clipboard.js. Total disponibil 2 eveniment. Primul eveniment (de succes) are loc după o copie de succes, iar a doua (eroare) are loc în cazul unei erori (eșec).
Sursa de copiere Notă cu funcția
Clipboard.js vă permite să specificați o țintă (element al cărui conținut doriți să le copiați sau text) nu numai prin date-atribute, dar, de asemenea, folosind în mod dinamic funcții. Acest lucru vă permite să nu facă nicio modificare a codului HTML, și anume Aceasta elimină necesitatea de a adăuga la elementele de date și atributele ID.
Să ia în considerare următoarele exemple:
1. stabilirea obiectivelor dinamic (țintă).
2. Setarea dinamică a textului.
Exemple care utilizează capacități suplimentare clipboard.js
Luați în considerare câteva exemple, care va utiliza caracteristicile suplimentare oferite de clipboard.js script.
1. Exemplu de crearea dinamică a butoanelor de copiere pentru toate elementele de pre pe pagină.
2. Un exemplu în care folosim evenimentele clipboard.js pentru a crea un proces interactiv de copiere în clipboard.