Jak utworzyć przycisk „Kopiuj do schowka” w JavaScript

JavaScript to język programowania internetowego, który sprawia, że ​​nasza strona internetowa jest interaktywna, dając jej możliwość myślenia i działania. Kopiuj przycisk do schowka jest koniecznością na przykład na wielu stronach internetowych, jeśli opracowałeś stronę internetową, która parafrazuje twoje zdania lub Twoja witryna jest zmywaczem plagiatu lub jest prostym pole tekstowym, które pozwala użytkownikowi pisać dane online. Aby poprawić wrażenia użytkownika, witryny, które dostarczają pewnych informacji i że informacje są wymagane w innych sekcjach witryny, strona internetowa wymaga kopii przycisku schowka. Patrząc na wszystkie te zastosowania, wdrożyćmy program JavaScript, który odpowie na pytanie, jak utworzyć skopiuj do schowka przycisk w JavaScript.

Html

HTML to język hipertekstowy znacznika, który nadaje strukturę naszej witrynie. Użyjemy HTML do utworzenia pola wejściowego, które będzie używane przez użytkownika do wprowadzenia tekstu. Następnie zostanie utworzony przycisk, który po kliknięciu skopiuje wszystko, co jest w polu wejściowym. Ostatecznie użyjemy znacznika skryptu, aby odwołać się do pliku JavaScript, który ma kod JavaScript:

Kopiuj

Użyliśmy ID atrybut w znaczniku wejściowym, abyśmy mogli odwołać się później z pliku JavaScript. Zainicjowaliśmy również na kliknięcie zdarzenie, które oznacza, gdy użytkownik klika Kopiuj przycisk Handleclick () funkcja będzie działać.

JavaScript

Zainicjowaliśmy funkcję o nazwie HandLeclick (), aby za każdym razem, gdy użytkownik kliknie przycisk kopii, kod w tej funkcji rozpoczął wykonywanie. Wewnątrz funkcji, używając atrybutu ID pola wejściowego, odwoływaliśmy się do pola wejściowego i dołączyliśmy .wartość na końcu, tak aby wartość pola wejściowego była przechowywana na wejściu zmiennej. Teraz, gdy mamy wartość pola wejściowego, skopiujmy wartość do schowka za pomocą nawigatora.schowek.zapis () funkcja, w której przekazujemy zmienną wejściową jako parametr. Tekst zmiennej wejściowej jest teraz kopiowany do schowka. Ostatecznie powiadomimy zmienną wejściową.

funkcja Handleclick ()
/ * Zapisz wartość MyText na zmienną wejściową */
var input = dokument.getElementById („MyText”).wartość;
/ * Skopiuj tekst w polu tekstowym */
nawigator.schowek.WriteText (wejście);
alert („skopiowany tekst:” + wejście);

Wprowadziliśmy tekst Kopiuj artykuł do schowka w polu wejściowym, a teraz klikniemy Kopiuj przycisk. Zobaczymy alert pokazujący skopiowany tekst:

Przejdź do nowego okna lub pliku słów i naciśnij Ctrl+v który wklei Skopiuj do artykułu schowka w tym oknie.

Wniosek

Kopiuj przycisk do schowka, jest bardzo przydatny, gdy tworzysz stronę internetową, która wykorzystuje informacje z jednej sekcji do drugiej, a tym samym poprawić wrażenia użytkownika. Kopiuj przycisk schowka to także projekt dla początkującego, który chce ćwiczyć swoje umiejętności JavaScript.

W tym poście zaimplementowaliśmy kopię do przycisku schowka w JavaScript wraz z zrzutami ekranu i GIF.