<!doctype html>
<html>
<head>
<script>
var copyBtn = document.querySelector('.clicktoCopy');
copyBtn.addEventListener('click', function(event) {
var emailLink = document.querySelector('.clicktoCopy');
var range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
$(".copySuccess").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
} catch(err) {
console.log('Oops, unable to copy');
$(".copyError").fadeIn( 150 ).delay( 1500 ).fadeOut( 200 );
}
window.getSelection().removeAllRanges();
});
</script>
<style>
.copySuccess,
.copyError {
width: 300px;
height: 75px;
display: none;
padding: 0;
margin: auto;
position: fixed;
top: 25%;
right: 0;
left: 0;
line-height: 70px;
text-align: center;
color: white;
z-index: 9999;
font-family: 'HelveticaNeueLight', 'Helvetica', Arial, sans-serif;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.copySuccess { background-color: #9add3b; }
.copyError { background-color: #dd493b; }
</style>
</head>
<body>
<span class="clickCopy">AIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQIAIzaSyBkkHxHW91kshha5FMddGQa9I-XivKWpQI</span>
<div class="copySuccess">Success!</div>
<div class="copyError">Error!</div>
</body>
</html>
Click to copy clipboard script.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.