HTML
<div class="demo-container-main">
<div class="demo-container-text-area">
<textarea id="textInput" class="form-control" rows="3" name="text">My friend wasn’t sure if he’d like volunteering at the farm, but I told him, “Don’t be chicken, it’s eggs-tremely rewarding!”</textarea>
</div>
<div class="demo-container-copy-button">
<button id="btnCopy" class="btn btn-warning text-start ctc-button-copy" role="button" onclick="copyToClipboard();">COPY</button>
</div>
<div class="demo-container-text-area">
<textarea class="form-control" rows="3" name="text" placeholder="Paste (Ctrl + V)"></textarea>
</div>
</div>
CSS
.demo-container-main {
margin: 4em auto;
max-width: 600px;
padding: 2em;
}
.ctc-button-copy {
position: relative;
width: 90px;
font-size: 11px;
border: none;
}
.ctc-button-copy:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f0c5";
top: 0;
right: 0;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.1);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ctc-button-copied {
position: relative;
width: 90px;
font-size: 11px;
}
.ctc-button-copied:after {
position: absolute;
font-family: 'FontAwesome';
content: "\f00c";
top: 0;
right: 0;
padding: 6px 8px;
background: rgba(0, 255, 0, 0.6);
color: rgba(255, 255, 255, 0.9);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* demo containers */
.demo-container-text-area {
margin-bottom: 1em;
}
.demo-container-copy-button {
margin-bottom: 1em;
text-align: right;
}
JS
function copyToClipboard(){
var text = document.getElementById("textInput");
text.select();
text.setSelectionRange(0, 99999);
document.execCommand("copy");
$("#btnCopy").prop("disabled", true);
$("#btnCopy").addClass("ctc-button-copied");
$("#btnCopy").text("Copied");
}
$("#textInput").on("click", function() {
$("#btnCopy").prop("disabled", false);
$("#btnCopy").removeClass("ctc-button-copied");
$("#btnCopy").text("Copy");
});
Alternate table row styles
Conditional formatting of table rows
Copy text to clipboard
Disable spaces in an input field
Multi step form with progress indicator
Read more or less
Remove the leading and trailing space
Short functions
Toggle visibility with a slide effect
Toggle visibility without pushing content down
Validate checkboxes
Validate input fields
Validate radio buttons
Validate TinyMce editor