Learn how to copy text and paste to clipboard using javascript

This blog is part of 1 Tute Sets.

Javacript/jQuery Examples

Tute set by shristi.shandilya

9 Blogs

1
Create draggable objects using javascript

by shristi.shandilya
2
How to check password strength in your form using jQuery

by shristi.shandilya
3
Start an infinite animation effect on page load using jQuery

by shristi.shandilya
4
Learn how to create a slider with animation effects using simple code of jQuery

by shristi.shandilya
5
Create color picker using javascript without using any external link/library/plugin

by shristi.shandilya

prev 1 2 next

Learn how to copy text and paste to clipboard using javascript
- 6/9
@shristi.shandilya

Follow Recommendations Offline Message

about 9 years ago
- 1
- 0
  Positive Vote
- 0
  Negative Vote
- 0
  Save Favourite
- 0
- 0
- 1
- 0
- 2.52k
Comment on it
Hii,

To learn how we can copy text and paste to clipboard using very simple few lines of javascript code,Go through the given example below
In this example execCommand() plays an important role in the following way:
Step 1: I have a html tag i.e <p></p> inside which some text is written. That P tag is having an unique ID "text_element".

<p id="text_element">Copy this !</p>

Step 2: Now a javascript onclick event is added in a html tag i.e a button .

<button onclick="copyToClipboard('text_element')">
Copy to clipboard
</button>

Step 3 : Create a function inside script tag having name same as declared inside button's onclick event.

function copyToClipboard(elementId)

When the user will click on the button javascript code will run on client side to copy the text written within the P tag , the moment user clicks on the button execCommand will run to copied the text.

Example:
```
<body>
<p id="text_element">Copy me and paste me wherever you want!</p>

<button onclick="copyToClipboard('text_element')">
  Copy to clipboard
</button>
<br/><br/><input type="text" placeholder="Paste here for checking" />
<script type="text/javascript">
 function copyToClipboard(elementId) {

  var PasteContent = document.createElement("input");


 PasteContent.setAttribute("value", document.getElementById(elementId).innerHTML);


 document.body.appendChild(PasteContent);


 PasteContent.select();
 document.execCommand("copy");
 document.body.removeChild(PasteContent);

}

</script>
</body>
```
- copyselect.html
Tags
Javascript Blog copy to clipboard javascript
- 6/9
Comment on it