0

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>
yostijognu
  • 19
  • 3

0 Answers0