How to Copy Text to Clipboard without Flash using 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:
<!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
