Knowband Blog | Ecommerce Modules

Copy to clipboard in JavaScript

Cele bloga

Po przeczytaniu tego bloga będziesz mógł dowiedzieć się, w jaki sposób dane można skopiować do schowka za pomocą skryptu java.

Zaleta funkcji kopiowania do schowka

W obecnym świecie sieci chodzi o użytkownika doświadczonego z Twojej witryny. Podczas naszej pracy na dowolnej stronie kopiujemy zawartość z jednego miejsca i wklejamy w innym miejscu. To naprawdę pomocne dla użytkownika, jeśli witryna daje funkcjonalność kliknięcia, aby skopiować. Oszczędza czas i wysiłek użytkownika, aby wybrać i skopiować zawartość.

Implementacja funkcji kopiowania do schowka

Zobaczmy, jak możemy dodać tę funkcjonalność:

Krok 1:

Utwórz kod HTML z akapitem zawierającym treść i przycisk do kliknięcia. Możesz użyć dowolnego odpowiedniego elementu zamiast akapitu, na przykład pola tekstowego, pola tekstowego, ukrytych pól itp.

<body> <p id = "txt_knoband"> KnowBand może pochwalić się najlepszymi wtyczkami branżowymi dla systemów eCommerce i ma wieloletnie doświadczenie w pracy z witrynami e-commerce. </p> <button onclick = "onClickCopy ()"> Kopiuj tekst / button> </body>

Krok 2:

Musisz utworzyć funkcję onClickCopy (), która skopiuje dane akapitu. Funkcja po prostu uruchomi „document.execCommand („ copy ”)”, aby skopiować dane do schowka.

function copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand („kopia”); document.body.removeChild (tempInput); alert („wartość skopiowana”); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Jak ustawić Cookie za pomocą JavaScript