What does this jQuery snippet do?
This jQuery snippet implements a copy-to-clipboard feature and visual feedback when copying.
Demo
jQuery
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");
});
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;
}
Alternate table row styles
Conditional formatting of table rows
Copy text to clipboard
Disable space input in text fields
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