I have this script to copy an information inside input field but the document.execCommand
is deprecated.
What is the alternative to have the same approach ?
<div class="input-group">
<span id="copyButton" class="btn" title="Click to copy">
<i class="bi bi-clipboard-check" aria-hidden="true" title="Click to copy"></i>
</span>
<?php echo HTML::inputField('url', '', 'size="125" id="copyTarget" class="form-control'); ?>
</div>
the javascript function
<script>
(function() {
"use strict";
function copyToClipboard(elem) {
var target = elem;
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
console.warn(e);
succeed = false;
}
// Restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (succeed) {
$(".copied").animate({ top: -25, opacity: 0 }, 700, function() {
$(this).css({ top: 0, opacity: 1 });
});
}
return succeed;
}
$("#copyButton, #copyTarget").on("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
})();
</script>