Hvordan lage Copy to Clipboard -knappen i JavaScript

JavaScript er et nettprogrammeringsspråk som gjør nettstedet vårt interaktivt ved å gi det muligheten til å tenke og handle. Kopi til utklippstavle -knapp er en nødvendighet på mange nettsteder for eksempel hvis du har utviklet et nettsted som omskriver setningene dine, eller nettstedet ditt er en plagieringsmor, eller det er et enkelt tekstfelt som lar brukeren skrive data online. For å forbedre brukeropplevelsen, nettsteder som gir litt informasjon og at informasjon kreves i andre deler av nettstedet, krever nettstedet kopien til utklippstavlen. Så når vi ser på alle disse bruksområdene, la oss implementere et JavaScript -program som vil svare på spørsmålet om hvordan vi skal lage kopiere til utklippstavle Knapp i JavaScript.

Html

HTML er et markering av hypertekstspråk som gir strukturen til nettstedet vårt. Vi vil bruke HTML for å lage et inngangsfelt som vil bli brukt av brukeren til å legge inn litt tekst. Da vil det opprettes en knapp, som når klikket vil kopiere alt som er i inngangsfeltet. Til slutt vil vi bruke en skriptetag for å referere til JavaScript -filen som har JavaScript -kode:

Kopiere

Vi brukte id Attributt i inndatakoden slik at vi kan referere den senere fra JavaScript -filen. Vi initialiserte også ved trykk Hendelse som betyr når brukeren klikker på kopiere knapp, The HandleClick () funksjonen vil kjøre.

JavaScript

Vi initialiserte en funksjon med navnet HandleClick () slik at når brukeren klikker på kopiknappen, vil koden i denne funksjonen begynne å utføre. Inne i funksjonen, ved hjelp av ID -attributtet til inngangsfeltet, refererte vi inn inngangsfeltet og festet .verdi til slutt slik at inngangsfeltverdien lagres i variabel inngang. Nå som vi har verdien av inngangsfeltet, la oss kopiere verdien til utklippstavlen ved hjelp av navigatøren.utklippstavle.Skriv () Funksjon der vi passerer inngangsvariabelen som en parameter. Inngangsvariabeleksten er nå kopiert til utklippstavlen. Til slutt varsler vi inngangsvariabelen.

funksjon HandleClick ()
/ * Lagre verdien av myText til inngangsvariabel */
var input = dokument.getElementById ("MyText").verdi;
/ * Kopier teksten innenfor tekstfeltet */
Navigator.utklippstavle.WriteText (input);
varsel ("Kopiert tekst:" + input);

Vi skrev inn teksten Kopier til utklippstavlen artikkel i inngangsfeltet, og nå vil vi klikke på kopiere knapp. Vi vil se et varsel som viser den kopierte teksten:

Gå til et nytt vindu eller en ordfil og trykk Ctrl+V som vil lime inn Kopier til utklippstavlen artikkel i det vinduet.

Konklusjon

Kopier til utklippstavlen er veldig nyttig når du lager et nettsted som bruker informasjon fra en seksjon til en annen, og forbedrer derfor brukeropplevelsen. Kopi til utklippstavlen er også et prosjekt for en nybegynner som ønsker å øve på JavaScript -ferdighetene sine.

I dette innlegget implementerte vi kopien til utklippstavlen i JavaScript sammen med skjermbilder og en GIF.