CODEWITHSUNDEEP
javascripthtmlclient-side
Bob-Oh
Bob-Oh

Reputation: 31

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

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.

Upvotes: 1

Views: 5331

Answers (3)

Ula
Ula

Reputation: 2748

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.

Upvotes: 1

Bob-Oh
Bob-Oh

Reputation: 31

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);
}

Upvotes: 2

Alexandre Demelas
Alexandre Demelas

Reputation: 4690

Look at clipboard.js

A modern approach to copy text to clipboard

No Flash. No dependencies. Just 2kb gzipped

https://clipboardjs.com/

Upvotes: 2

Related Questions