12-Apr-2021
.
Admin
Hi Dev,
In this blog, I will show you how to copy text to clipboard without flash using jquery example. We will talk about copy to clipboard 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.
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 will give you full example for how to copy to clipboard without flash using jquery So let's see the bellow example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Copy to clipboard JS Example - NiceSnippets.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Target -->
<textarea id="bar" class="form-control mt-5" placeholder="Write Something for Copy"></textarea>
<!-- Trigger -->
<button class="btn btn-success mt-2" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
</div>
</div>
</div>
<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
It will help you....
#Jquery
