Copy to clipboard
Click to copy
<div class="copy-wrap grid grid-column-2 grid-gap-m">
<input
class="copy-content"
type="text"
value="test">
<div class="copy-action tooltip-wrap">
<span class="tooltip copy-action-text">Click to copy</span>
<button href="#" class="btn btn-icon btn-outline">
<svg height="24px" width="24px" viewBox="0 0 24 24"><use xlink:href="#delete"></use></svg>
</button>
</div>
</div>
Click to copy
Copy to Clipboard JavaScript
Click to copy
<script>
// copy scripts manager enqueue code
function copyToClipboardDplugins(element) {
var sel, range;
var el = jQuery(element)[0];
if (window.getSelection && document.createRange) { //Browser compatibility
sel = window.getSelection();
if(sel.toString() == ''){ //no text selection
window.setTimeout(function(){
range = document.createRange(); //range object
range.selectNodeContents(el); //sets Range
sel.removeAllRanges(); //remove all ranges from selection
sel.addRange(range);//add Range to a Selection.
},1);
}
}else if (document.selection) { //older ie
sel = document.selection.createRange();
if(sel.text == ''){ //no text selection
range = document.body.createTextRange();//Creates TextRange object
range.moveToElementText(el);//sets Range
range.select(); //make selection.
}
}
var $temp = jQuery("<input>");
jQuery("body").append($temp);
$temp.val(jQuery(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
jQuery(document).ready(function(){
jQuery(document).on("click", ".copy-action", function(){
var currObj = jQuery(this);
copyToClipboardDplugins(jQuery(currObj).parents('.copy-wrap').find(".copy-content"));
jQuery(currObj).find(".copy-action-text").html("Copied");
setTimeout(function(){
jQuery(currObj).find(".copy-action-text").html("Click to copy");
}, 3000);
});
});
</script>