<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
<style>
input {
padding: 10px;
border: #a5d2ca 1px solid;
border-radius: 4px;
background-color: #FFF;
width: 230px;
margin-top: 5px;
box-sizing: border-box;
}
button {
background-color: rgb(255, 87, 51);
padding: 10px 40px;
color: #FFF;
border: #739690 1px solid;
border-radius: 4px;
cursor: pointer;
}
#container{
display:block;
width:500px;
height:180px;
margin-bottom:12px;
padding:15px;
border:2px dotted orange;
}
.copied{
position:absolute;
left:423px;
width:100px;
height:40px;
text-align:center;
line-height:40px;
background:#4C7D4C;
border-radius:5px;
color:white;
display:none;
}
</style>
<script>
$( document ).ready(function() {
console.log( "ready!" );
new Clipboard('.btn');
$("button").on("click", function(){
$('.copied').show();
$('.copied').fadeOut(2000);
});
});
</script>
<div class="copied"> Copied!!! </div>
<div id="container">
<h1> 3. Copy text from the div tag </h1>
<label> Product Number : </label>
<div style="font-size: 22px;" id="example3"> 12743-64833-383993-646383 </div>
<button class="btn" data-clipboard-target="#example3"> Copy to clipboard </button>
</div>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.