Copiați în clipboard

„Copiere în clipboard“ - funcționalitate pe care toți folosim de câteva ori pe zi, dar client API au dezavantajele lor; unele dintre ele sunt iritante fereastra de ieșire cu întrebarea „Sunteți sigur?“ de fiecare dată când încercați să copiați ceva, dar nu este foarte bine reflectat în gradul de utilizare și imaginea de ansamblu a cererii sau a site-ului.

Acum câțiva ani, am vorbit despre ZeroClipboard - script vă permite să copiați în clipboard folosind Flash. Știu că toți urăsc Flash, dar funcționalitatea mai presus de toate, si trebuie sa recunosc - a fost o soluție decentă. Acum, avem ceva mai bun decât o clipboard.js bibliotecă. Ea nu are nevoie de Flash, prezența jQuery de tip cadru de lucru și în toate browserele moderne:

instalarea clipboard.js

Puteți să-l instalați folosind NPM sau umbrar:

Dacă nu ați instalat manageri de pachete, descărcați ZIP-fișier cu noi, sau de pe site-ul oficial.

conectarea clipboard.js

În primul rând, conectați grafie d folderul dist sau descărcați-l de la CDN înainte de corpul de închidere:

Acum aveți nevoie pentru a crea o instanță, care trece DOM-selector, element HTML, sau o listă de HTML-elemente.

La interior, avem nevoie pentru a colecta toate elementele care se potrivesc selectorul și conectează evenimentele noastre receptoare fiecare. Dar știi ce? Dacă aveți, de exemplu, o sută de elemente de potrivire, operațiunea poate consuma o mulțime de memorie. De aceea, vom folosi transmisia evenimentului, care înlocuiește un eveniment de mai multe receptoare. În cele din urmă, #perfmatters.

Exemple copiați în clipboard

Spun frumos: trăim într-o eră a renastere declarativă, așa că am decis să profite de date HTML5-atribute pentru o mai bună utilizare.

Destul de des, pe care doriți să copiați conținutul dintr-o altă celulă. Puteți face acest lucru prin adăugarea de date atribut-clipboard-țintă pentru elementul declanșatoare. Valoarea activați în acest atribut trebuie să se potrivească cu celălalt element selector.

Se taie text dintr-un alt element

Copiați în clipboard și taie

După cum s-ar putea aștepta, tăietura de acțiune funcționează doar pe elemente sau .</p> <p>De fapt, nu avem nevoie de un alt element pentru a copia conținutul de la ea. Puteți include doar atributul de date clipboard-text pe elementul de declanșare.</p><p>Copiați în clipboard</p> <p>Sunt momente când trebuie să pună în aplicare feedback-ul utilizatorului, sau pentru a păstra ceea ce a fost ales după o operație de copiere / tăiat. Acesta este motivul pentru care primele evenimente de utilizator procesate, cum ar fi succesul și eroarea. astfel încât să puteți citi și aplica propria logică.</p> <p>Pentru a demonstra, deschide consola :)</p> <h6>caracteristici suplimentare</h6> <p>Dacă nu doriți să schimbați HTML-Code - pentru tine este un API foarte convenabil. Tot ce trebuie să faceți - este să declare o funcție pentru a face treaba, și să se întoarcă o valoare. De exemplu, dacă doriți să setați dinamic țintă. aveți nevoie pentru a reveni unitatea:</p> <p>Dacă doriți să setați în mod dinamic textul. ar trebui să se întoarcă șirul:</p> <p>În plus, în cazul în care lucrați cu o aplicație de o pagină (SPA), puteți gestiona ciclul de viață al DOM cu mai multă precizie. Iată cum pentru a curăța evenimente și obiecte pe care le creează:</p> <p>Nu Flash, un API simplu, și funcționează în toate browserele majore! Toate acestea fac clipboard.js atractiv pentru web-developeri. Flash zile retardare sunt numerotate - Trăiască tehnologia web!</p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Copierea în clipboard (buffer)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> joc 2D pe unitate. orientări detaliate. partea 1 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_qvm8sbojsv0kmq5b58md.webp" width="250" height="140" title="Copierea în clipboard (buffer)" alt="Copiați în clipboard" ></div></p> <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_hgpdw1sj6iwh8ya00rue.webp" width="250" height="140" title="Copiați în clipboard (de schimb)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> Lucrul cu Unitate în 2D <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Copierea în clipboard (buffer)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> joc 2D pe unitate. orientări detaliate. partea 3 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Copierea în clipboard (unitatea de joc DETALIATE Unitatea)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> joc 2D pe unitate. orientări detaliate. partea 4 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Copierea în clipboard (buffer)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> joc 2D pe unitate. orientări detaliate. partea 5 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_y3maaj8gmgetsly0njji.webp" width="250" height="140" title="Copiați în clipboard (joc Unitatea unității)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> joc 2D pe unitate. orientări detaliate. partea 6 <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_pkcfqsgik8f4jtjtnkdq.webp" width="250" height="140" title="Copierea în clipboard (buffer)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> noul tutorial GUI Unity. Partea a 2. <p><div style="text-align:center;"><img src="https://webp.images-on-off.com/7/80/250x140_pkcfqsgik8f4jtjtnkdq.webp" width="250" height="140" title="Copiați în clipboard (de schimb)" alt="Copiați în clipboard" ></div></p> <ul> <li>unitate</li> </ul> noul tutorial GUI Unity. Partea 1. </div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/antrenor-personal-cum-sa-castige-increderea.html">antrenor personal cum să câștige încrederea</a></li> <li><a href="/articles/podstat-l.html">Podstat - l</a></li> <li><a href="/articles/examenul-medical-in-strainatate.html">Examenul medical în străinătate</a></li> <li><a href="/articles/ce-inseamna-la-zi-sensul-cuvintelor.html">Ce înseamnă la zi - sensul cuvintelor</a></li> <li><a href="/articles/set-de-cursoare-pentru-programele-cursorfx-si.html">Set de cursoare pentru programele CursorFX și CursorXP - tema pentru ferestre</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/instalarea-glafuri-sfaturi-si-repere-practice.html">Instalarea glafuri sfaturi și repere practice - elemente suplimentare</a></li> <li><a href="/articles/cosmetice-delfino-mort.html">Cosmetice Delfino mort</a></li> <li><a href="/articles/ca-linoleum-vechi-perestelit-din-nou.html">Ca linoleum vechi perestelit din nou</a></li> <li><a href="/articles/fitoterapie-cu-insuficienta-circulatorie.html">Fitoterapie cu insuficiență circulatorie, reflexoterapie</a></li> <li><a href="/articles/acidophilus-slabire.html">acidophilus slăbire</a></li> <li><a href="/articles/tarhon-plante-medicinale-in-crestere-in-camp.html">Tarhon plante medicinale în creștere în câmp deschis și la domiciliu</a></li> </ul> <br> <a href="/privacy.html">Politica de confidențialitate</a> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2024</p> <br> <ul> <li><a href="/articles/in-google-chrome-google-chrome-activa-modul-turbo.html">În Google Chrome (Google Chrome) activa modul turbo</a></li> <li><a href="/articles/compot-de-fructe-de-padure-congelate.html">Compot de fructe de pădure congelate</a></li> <li><a href="/articles/plafoane-franceze-sverdlovsk-din-ucraina.html">plafoane franceze Sverdlovsk din Ucraina</a></li> <li><a href="/articles/acasa-bucatarie-din-otel-inoxidabil-metalurgice.html">Acasă bucătărie din oțel inoxidabil, metalurgice Sandra</a></li> <li><a href="/articles/si-daca-omul-se-vrajesc-lumea-subtila-ezoteric.html">Și dacă omul se vrăjesc)) - lumea subtilă - Ezoteric Forum - magie, horoscop, ghicire,</a></li> <li><a href="/articles/diferentele-intre-engleza-si-cocker-spaniel.html">Diferențele între engleză și Cocker Spaniel</a></li> <li><a href="/articles/rezerva-esti-un-maniac-eu-sunt-un-maniac-sau-un.html">Rezervă - Ești un maniac, eu sunt un maniac sau un câine știe - Milevskaya Lyudmila - citit online, pagina 3</a></li> </ul> </div> </footer></div> </body> </html>