jQuery

Copy text to clipboard

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");
});