How to Copy & Paste the text on Click using the JavaScript or ReactJS ?
Published: 2023-01-08 17:07:08

- In the HTML page add the div tag with id 

```
<div id="copydata">Copy the this text by the button</div>
```

- Add one button to call the function of JS 

```
 <button onclick="copyData()">Copy</button>
```
- And one input button to paste the copy text 

```
<input type="text" name="" id="" />
```
- JavaScript Function 

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

_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>

```
## Paste text 
- Add Button tag to call the event listener

```
 <button>Paste</button>
```
- Add paragraph tag to add the copy text

```
 <p id="clipboard-paste"></p>
```

- 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)
                    );
            });
})
```

# 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>

```