ROR : Copy some arbitrary text into user’s clipboard

There are a couple of ways to get the text you desire to be copied to user’s clipboard. The easiest way to do is using JavaScript to copy stuff. However, it always requires user to initiate the action. This is because browsers don’t want bunch of programmers messing with the user’s clipboard. The other workaround is using Flash player.

Using JavaScript

$(function () {
    $('.copy-pact-url').on('click', function () {
        var textFieldToBeCopied = $(this).parents('.row').find('input');
        copyToClipboard(textFieldToBeCopied);
    });

    function copyToClipboard(textFieldToBeCopied) {
        textFieldToBeCopied[0].select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    }
});

The JavaScript document.execCommand('copy') support has grown in recent days, following links will explain in a detail:

Problem with this solution:

Only the latest browsers support this and there are still people using older version of browsers. So, this may have issue with backward compatibility.

Note:

If you are looking for solution where you want to copy text not only from some visible textbox/text area, see here

Additional notes

Only works if the user takes an action

All document.execCommand('copy') calls must take place as a direct result of a user action, e.g. onClick event handler. This is a measure to prevent messing with the users clipboard when they don’t expect it.

Is it supported?

You can also detect if “copy” is supported via the following:

var copySupported = document.queryCommandSupported('copy');

However again, this might return false in some browsers if this is not called as a result of a user action. Different browser implementations are still in flux, so remember to do your testing.

Using Flash Player

Clippy is a very simple Flash widget that makes it possible to place arbitrary text onto the client’s clipboard. Here is what Clippy looks like on GitHub. You can use this if feel comfortable; however there are more simpler workarounds available which I will shortly come up with.

  • Zeroclipboard::Rails

    ZeroClipboard requires the use of Flash Player 11.0.0 or higher. See ZeroClipboard for more details about the underlying mechanism.

    Setup

    Add this line to your application’s Gemfile:

    gem 'zeroclipboard-rails'

    Then execute:

    $ bundle

    Add this line to your app/assets/javascripts/application.js file:

    //= require zeroclipboard
    .row.pact-page-link
      .input-group.col-xs-10.col-xs-offset-1
        input type="text" id="pact-page-url" class="form-control" value="#{pact_page_url(pact.try(:child).try(:url_code))}" readonly="readonly"
          span.input-group-btn
            button.btn.btn-default.copy-pact-url data-clipboard-target='pact-page-url'
              | Copy
    $(document).ready(function() {
        var clip = new ZeroClipboard($(".copy-pact-url"))
    });

Sources:

http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

https://github.com/mojombo/clippy

https://github.com/blog/1365-a-more-transparent-clipboard-button

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s