HTML Copy to Clipboard and Close Tab

466 Views Asked by Ryder Cragie At 06 April 2025 at 10:54

I want to create an HTML script that does the following:

Copies a URL to the clipboard.
On a black background — Shows a green tick and says "Link Copied to Clipboard" for a couple of seconds in white text.
Closes the current tab where this script is running.

I want all 3 of these actions to happen automatically when the file is opened in the order above. Ideally, I'd like it to take less than 5 seconds. How can I go about doing this? Thanks in advance.

Reason: I'm going to add a "Copy Link" button to my website and this is the only way I can do it. I use Google Sites.

Original Q&A

There are 1 best solutions below

Revan99 On 04 March 2022 at 17:48

try this code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- button to trigger the action -->
    <button id="button">close window</button>
    <h1 id="text">some text</h1>

    <script>
      // get the button
      const button = document.getElementById("button");
      //add event listener to the button
      button.addEventListener("click", () => {
        // get the text
        const text = document.getElementById("text");
        //copy the text to the clipboard
        navigator.clipboard.writeText(text.innerHTML).then(() => {
          //add time out to close the window
          setTimeout(() => {
            window.close();
          }, 3000);
          // add your toaster  here to show the text copied 
          // hare is some reference https://www.w3schools.com/howto/howto_js_toast_message.asp
          text.innerHTML = "Copied to clipboard!";
        });
      });
    </script>
  </body>
</html>

HTML Copy to Clipboard and Close Tab

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SCRIPT-TAG

Related Questions in GOOGLE-SITES-2016

Trending Questions

Popular # Hahtags

Popular Questions