How to Copy Text to Clipboard without Flash using JQuery?

By Hardik Savani November 5, 2023 Category : jQuery

We sometimes require to give function of copy some text by clicking on button or any link. There are several library can do copy text using flash player, but in this example i will do it without using flash player. In this example we will use

clipboard.js Jquery Plugin for copy to clipboard.

clipboard js provide us to simply copy to clipboard, you can simply do alert or message for after success coped. You can simply use by as written following code.

Code:

var clipboard = new Clipboard('.btn');

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

clipboard.on('error', function(e) {
    alert('Something is wrong!');
});

Now i am going to share with you full example of clipboard js plugin. I use cdn for jquery and clipboard js that way you can run easily for testing. You can also see demo. So let's see bellow example:

Example:

Read Also: Laravel JQuery Ajax Loading Spinner Example
<!DOCTYPE html>
<html>
<head>
	<title>Copy to clipboard JS Example</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.16/clipboard.min.js"></script>
</head>
<body>

<!-- Target -->
<textarea id="bar" class="form-control" placeholder="Write Something for Copy"></textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

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

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

	clipboard.on('error', function(e) {
	    alert('Something is wrong!');
	});
</script>

</body>
</html>

For more information you can get from here : clipboard.js

I hope it can help you....
Tags :
Previous

Laravel Ajax Image Upload with Validation Example
Next

Laravel 5 amazon s3 file upload tutorial - Part 2

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares