DEV Community

Dhiman_aman
Dhiman_aman

Posted on

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

#webdev #node #javascript
  • 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

Top comments (1)

Collapse
 
youssef_elatmani_f9b6b929 profile image
youssef elatmani •

Straight forward explanation,
Thanks a lot