clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

How to Copy Text to Clipboard using JavaScript

writter  Sumit Dey Sarkar
Date  11 Sep 2022
Language  JavaScript
How to Copy Text to Clipboard using JavaScript

How to Copy Text to Clipboard using JavaScript

In this tutorial we will learn how to copy text to clipboard using javaScript.

Let's see a example -

How to Copy Text to Clipboard using JavaScript

<!DOCTYPE html>
<html>
<head>
	<title>How to Copy Text to Clipboard using javaScript</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.16/clipboard.min.js"></script>
</head>
<body>

<div class="container mt-5">
    <h3>How To Copy Text To Clipboard Using javaScript</h3>
    <textarea id="copyArea" class="form-control" placeholder="Write Something for Copy"></textarea>
<button class="btn copyBtn bg-success text-white mt-2" data-clipboard-action="cut" data-clipboard-target="#copyArea">Copy Text</button>
</div>

<script type="text/javascript">
	var clipboard = new Clipboard('.copyBtn');


	clipboard.on('success', function(e) {
	    e.clearSelection();
	    alert('Copy text to Clipboard Successfully');
	});

	clipboard.on('error', function(e) {
	    alert('Not Copied!');
	});
</script>


</body>
</html>

 

Output

jQuery