DEV Community

Dhiman_aman
Dhiman_aman

Posted on

7

How to Copy & Paste the text on Click using the JavaScript or ReactJS ?

  • In the HTML page add the div tag with id
<div id="copydata">Copy the this text by the button</div>
Enter fullscreen mode Exit fullscreen mode
  • Add one button to call the function of JS
 <button onclick="copyData()">Copy</button>
Enter fullscreen mode Exit fullscreen mode
  • And one input button to paste the copy text
<input type="text" name="" id="" />
Enter fullscreen mode Exit fullscreen mode
  • JavaScript Function
<script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };
    </script>
Enter fullscreen mode Exit fullscreen mode

Done ✔🎯

Complete 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>CopyData</title>
  </head>
  <body>
    <div id="copydata">Copy the this text by the button</div>

    <button onclick="copyData()">Copy</button>
    <br />
    <input type="text" name="" id="" />
    <script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Paste text

  • Add Button tag to call the event listener
 <button>Paste</button>
Enter fullscreen mode Exit fullscreen mode
  • Add paragraph tag to add the copy text
 <p id="clipboard-paste"></p>
Enter fullscreen mode Exit fullscreen mode
  • JavaScript function
document.addEventListener('DOMContentLoaded',function(){
            let pasteButton = document.getElementsByTagName('button')[1];
            pasteButton.addEventListener('click', function () {
                navigator.clipboard
                    .readText()
                    .then(
                        cliptext =>
                            (document.getElementById('clipboard-paste').innerText = cliptext),
                            err => console.log(err)
                    );
            });
})
Enter fullscreen mode Exit fullscreen mode

Complete code with Copy/Paste 🎉⭐✨

<!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>CopyData</title>
  </head>
  <body>
    <div id="copydata">Copy the this text by the button</div>

    <button onclick="copyData()">Copy</button>
    <br />
    <input type="text" name="" id="" /> <br />

    <button onclick="">Paste</button> <br />
    <p id="clipboard-paste"></p>

    <script>
      copyData = () => {
        var ctype = document.getElementById("copydata").innerHTML;
        navigator.clipboard.writeText(ctype);
        alert("Copied Done 🤙🤙");
      };

      document.addEventListener('DOMContentLoaded',function(){
            let pasteButton = document.getElementsByTagName('button')[1];
            pasteButton.addEventListener('click', function () {
                navigator.clipboard
                    .readText()
                    .then(
                        cliptext =>
                            (document.getElementById('clipboard-paste').innerText = cliptext),
                            err => console.log(err)
                    );
            });
        }
      )
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
youssef_elatmani_f9b6b929 profile image
youssef elatmani

Straight forward explanation,
Thanks a lot

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay