JavaScript - Copy text in browser
This uses ClipboardJS to copy without plugins or Flash.
Include script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
In JavaScript, define a function that returns the text to be copied.
// Uses event delegation (bubble up)
var buttonCopy = new ClipboardJS("input[type=\"button\"][data-copytext]", {
text: function(trigger) {
return trigger.getAttribute('data-copytext');
}
});
Example usage:
<!DOCTYPE html>
<html>
<head>
<style>
span.code {
background-color: #eee;
font-family: "Courier New";
display: inline-block;
padding: 18px 20px;
margin: 8px 0;
position: relative;
}
span.code span.copy {
position: absolute;
top: 0;
right: 0;
padding: 1px 6px;
background-color: #ccc;
color: #000;
}
span.code span.copy:hover,
span.code span.copy.copy-success,
span.code span.copy.copy-error {
cursor: pointer;
color: #fff;
background-color: #2e215e;
}
span.code span.copy::after {
content: "COPY";
font-size: 10px;
font-family: Arial, sans-serif;
}
span.code span.copy.copy-success::after {
content: "COPIED!";
}
span.code span.copy.copy-error::after {
content: "ERROR!";
}
</style>
</head>
<body>
<p><span class="code"><span class="copy"></span>Text A</span></p>
<p><span class="code"><span class="copy"></span>Text B</span></p>
<p><span class="code"><span class="copy"></span>Text C</span></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
// Initialize
var buttonCopy = new ClipboardJS('span.code span.copy', {
// On trigger, return text from parent text content
text: function(trigger) {
return trigger.parentNode.textContent;
}
});
// On success, temporarily change button text
buttonCopy.on('success', function(e) {
e.trigger.classList.add("copy-success");
setTimeout(function() {
e.trigger.classList.remove("copy-success");
}, 2000);
});
// On success, temporarily change button text
buttonCopy.on('error', function(e) {
e.trigger.classList.add("copy-error");
setTimeout(function() {
e.trigger.classList.remove("copy-error");
}, 2000);
});
</script>
</body>
</html>