How do I copy to clipboard in Safari 8 on Yosemite OS X?

Question

I am running confluence and accessing it using Safari 8 on Yosemite operating system. Confluence has a nice feature called "Share a page" that generates a TinyURL and allows the user to click the "Copy" button shown below that copies the tiny URL to your clipboard.

Clicking on "Copy" and then trying to paste (using CRTL-V) does not work in Safari v8, but does in Firefox Quantum v60 on Yosemite. However, performing a CRTL-C followed by CRTL-V works on both Safari v8 and Firefox 60.

How do I get the "Copy" button to work on Safari v8?

I dug a bit deeper and found the javascript file that performs the "copy to clipboard" functionality below. Look for my comment at the very end below "works in Firefox 60, not Safari 8". That line is supposed to copy the Tiny URL to the clipboard. And it does successfully in Firefox, but not in Safari. How can I change the code to get this to work in Safari 8?

define('confluence/share-page/popup/setup-share-link', [
    'jquery',
    'confluence/share-page/service/analytics-service',
    'confluence/share-page/util/show-message'
], function ($,
             analyticsService,
             showMessage) {

    /**
     * Resolves the link. If it's a function, it will evaluate it, otherwise
     * it will just return it if it's a string, or return window.location if it's not
     * either of those things.
     * @param {function|string} link
     * @private
     */
    function _resolveLink(link) {
        if (typeof link === 'function') {
            return $.when(link());
        }
        if (typeof link === 'string') {
            return $.when(link);
        }
        return $.when(window.location);
    }

    /**
     * Adds analytics parameters to link. Returns the new link with query
     * parameters concatenated.
     * @param {string} link
     * @private
     */
    function _addAnalyticsToLink(link) {
        if (("" + link).indexOf('resumedraft.action') === -1) {
            return link;
        }

        var analyticsQueryParamString = 'src=shareui' +
            '&src.shareui.timestamp=' + (new Date()).getTime();

        var firstChar;
        if (window.location.search.length === 0) {
            firstChar = '?';
        } else {
            firstChar = '&';
        }

        return link + firstChar + analyticsQueryParamString;
    }

    /**
     * Sets up the Share Link and button to copy the link to clipboard
     * @param $container
     * @param parameters        The dialog's parameters passed-through
     */
    return function setupShareLink($container, parameters) {
        var $row = $container.find('.share-copy-link');
        var $shareLink = $row.find('input');
        var $copyButton = $row.find('button');
        // Don't set it up if it doesn't exist
        if (!$shareLink.length) {
            return;
        }

        // Set the default link, then get the real link and update it;
        $shareLink.val(window.location);
        _resolveLink(parameters.link).then(function (link) {
            link = _addAnalyticsToLink(link);
            $shareLink.val(link);
        });

        $shareLink.on('click focus',
            /**
             * Select all the contents of the input field on click
             */
            function (e) {
                setTimeout(function () {
                    _selectLink();
                }, 0);
                e.preventDefault();
            });

        $shareLink.focus(function () {
            analyticsService.publish(analyticsService.SHARE_LINK_CLICKED, parameters.entityId, parameters.shareType);
        });
        $copyButton.click(function () {
            analyticsService.publish(analyticsService.SHARE_LINK_COPY_CLICKED, parameters.entityId, parameters.shareType);
            _copy();
        });
        $shareLink.dblclick(function () {
            analyticsService.publish(analyticsService.SHARE_LINK_DOUBLE_CLICKED, parameters.entityId, parameters.shareType);
            _copy();
        });

        $shareLink.blur(function () {
            $shareLink.removeData('selected');
        });

        $(document).off('copy.share-link').on('copy.share-link', function () {
            if (!$shareLink.data('selected')) {
                return;
            }
            analyticsService.publish(analyticsService.SHARE_LINK_COPIED, parameters.entityId, parameters.shareType);
            showMessage($row, 'copied', parameters, false, function () {
                $copyButton.prop('disabled', true);
            }, function () {
                $copyButton.prop('disabled', false);
            });
        });


        /**
         * Select all the contents of the input field when the mouse
         * is there
         */
        function _selectLink() {
            $shareLink.select();
            $shareLink.data('selected', true);
        }

        /**
         * Copies the link to the clipboard
         */
        function _copy() {
            _selectLink();
            document.execCommand('copy'); // *** works in Firefox 60, not Safari 8
        }
    }
});

Answer 1

Here's copyText in raw JavaScript.

var doc, nav, I, copyText; // for use on other loads
addEventListener('load', function(){
doc = document; nav = navigator;
I = function(id){
  return doc.getElementById(id);
}
if(nav.clipboard){
  copyText = function(fromNode){
    fromNode.select(); nav.clipboard.writeText(fromNode.value.trim());
  }
}
else{
  copyText = function(fromNode){
    fromNode.select(); doc.execCommand('copy');
  }
}
// magic under here - except end load
var test = I('test'), test_button = I('test_button');
test_button.onclick = function(){
  copyText(test);
}
}); // end load

<input id='test' type='text' value='' /><input id='test_button' type='button' value='copy' />