How do I put the contents of a variable to the clipboard using javascript?

Question

function Copy() // this function will be latched to a button later on.
{
    var text = writePreview(); // this pours in the formatted string by the writePreview() function to the variable 'text'
    text = br2nl(text); //variable 'text' is purified from <br/> and is replaced by a carriage return

    //I need some code here to pour in the contents of the variable 'text' to the clipboard. That way the user could paste the processed data to a 3rd party application
}

I'm building an offline client-side web application. The main purpose of this is to have user's input to fields, format the text such that it fits a certain criteria, then click copy so they can paste it to a 3rd party CRM.

The only available browser for this is Google Chrome. I've scoured the internet hoping to find a simple solution for this.

I'm not concerned about security as this application is not going to be published and is meant just for offline use.

I want to keep it as simple as possible and adding invisible textarea ruin the layout. Flash is not allowed in my current environment.

Possible duplicate of [How do I copy to the clipboard in JavaScript?](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Sebastien Daniel, Mar 04 '16 at 21:23

score 2 · Answer 1 · answered Mar 04 '16 at 21:32

2

Look at clipboard.js

A modern approach to copy text to clipboard

No Flash. No dependencies. Just 2kb gzipped

https://clipboardjs.com/

answered Mar 04 '16 at 21:32

Alexandre Thebaldi

4,546
6
41
55

I've read about that and I got lost when it said: "Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements." I don't really know how to apply that to my code. If you could shed some light on that or provide a simple example, I'd appreciate it. – Bob-Oh Mar 04 '16 at 21:34
Be concise about where you got lost. I'm agreeing with the comment of seahorsepip. – Alexandre Thebaldi Mar 04 '16 at 21:53
1. I am not copying from an element 2. I am not cutting content from an element 3. it doesn't express how to send data-clipboard-text to a variable. While I admit , I'm not as expert as you might sound, this is the reason why I am asking the question because I've read quite a few things already and have not understood how to apply it to my current project. I've made this work before in IE in the past however since I only have Google Chrome to work with right now, this is the reason I'm asking the question. – Bob-Oh Mar 04 '16 at 22:14
also, could you define what essential basic knowledge I missed so that at least I could work on it? – Bob-Oh Mar 04 '16 at 22:16

score 1 · Accepted Answer · answered Mar 08 '16 at 19:55

this was solved by updating my browser (Google Chrome v49). I was using a lower version (v34).

found that later versions (v42+) of Google Chrome supports document.execCommand('copy')

I hope it helps people

here are the functions I used:

function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}

function copy()
{
    SelectAll('textAreaID');
    document.execCommand("Copy", false, null);
}

score 0 · Answer 3 · edited Sep 04 '20 at 13:38

According to this article "In javascript, copying a value from variable to clipboard is not straightforward as there is no direct command.".

Hence as suggested there I did the following:

defined the following in html file - I added at the bottom ( I never noticed element being added and being removed ):

<div id="container"/>
then in Javascript I added:

.

function copyQ() {

        var container = document.getElementById("container");
        var inp = document.createElement("input");
        inp.type = "text";
        container.appendChild(inp); 
        inp.value = "TEST_XYZ";
        inp.select();
        document.execCommand("Copy");
        container.removeChild(container.lastChild);
        alert("Copied the text: " + inp.value);
    }

May be there is a better way, but it works for me.

UPDATE:

Further, I found that if your text is multiline and if you use input of type text all text is converted to one line text.

To keep paragraphs / separate lines I tried to use textarea and text is copied as is - multi line:

    var inp = document.createElement("textarea");
    //inp.type = "text";

Hope it helps someone.

How do I put the contents of a variable to the clipboard using javascript?

3 Answers3