how to make a copy to clipboard button with js

Question

so i was trying to make a button that when clicked it copy a value from a variable

like

<button onclick="copyToClipboard()">COPY</button>

and then on that function it takes the element to copy from a variable like

var copyids = {
"ids": [
{
"name": "id1",
"id": 192389021
},
{
"name": "id2",
"id": 123879032
},
{
"name": "id3",
"id": 149018292
},
]
};

so like copyids.ids[0].id and it copy that value

i hope its understandable

In your button html is no id,class or name attribute specified. You need to add something. Otherwise you click it and there is no connection to the array of objects. — Bernhard Beatus, Mar 29 '21 at 09:14
@BernhardBeatus when its clicked it calls a function and that function has to copy and id value from the variable i wrote, i dont need any id on class name on the button — JvstAlf, Mar 29 '21 at 09:17
Yes, but how will you specify that for example copyids.ids[0].id so the first element will be copied or do you like the whole array of objects schould be copied? Please explain me what you link to do exactly. — Bernhard Beatus, Mar 29 '21 at 09:24
@BernhardBeatus it doesnt matter i just need the code then the element i want to copy i can change that, make like that button copy ```copyids.ids[0].id``` and its ok — JvstAlf, Mar 29 '21 at 09:28
Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Kai Lehmann, Mar 29 '21 at 09:33

score 2 · Accepted Answer · answered Mar 29 '21 at 09:31

2

Maybe this helps

function copyToClipboard() {
    let temp = document.createElement('textarea');
    temp.value = copyids.ids[0].id;
    document.body.appendChild(temp);
    temp.select();
    document.execCommand('copy');
    document.body.removeChild(temp);
}

answered Mar 29 '21 at 09:31

deithy

118
6

[execCommand is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) – HorusKol Mar 09 '22 at 05:26

score 0 · Answer 2 · answered Mar 29 '21 at 09:14

0

To copy, you will need to select before what you want to copy. Maybe you should put the data of the variable somewhere and copy it.

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

answered Mar 29 '21 at 09:14

Forth

114
1
6

score 0 · Answer 3 · answered Mar 29 '21 at 10:22

I made you a solution with the ability to select the desired data cell from the array. I've added a select tag for you, listing the name of each cell.

And at the choice of a specific option with you copy id in accordance with the specified name.

function copyToClipboard() {
    var copyids = {
        ids: [
            {
                name: "id1",
                id: 192389021,
            },
            {
                name: "id2",
                id: 123879032,
            },
            {
                name: "id3",
                id: 149018292,
            },
        ],
    };

    let selectIndex = document.querySelector("select").selectedIndex;
    let storage = document.createElement("input");
    storage.value = copyids.ids[selectIndex].id;
    console.log(storage.value);
    document.body.appendChild(storage);
    storage.select();
    document.execCommand("copy");
    document.body.removeChild(storage);
}

<button onclick="copyToClipboard()">COPY</button>
<select>
    <option value="id1">id1</option>
    <option value="id2">id2</option>
    <option value="id3">id3</option>
</select>

score 0 · Answer 4 · answered Mar 09 '22 at 06:29

The execCommand method has been deprecated, and it might not be supported by newer releases.

However, there is a Clipboard API that you can use in it's place.

To let the user select what to copy from your list:

<button onclick="copyToClipboard()">COPY</button>
<select>
    <option value="id1">id1</option>
    <option value="id2">id2</option>
    <option value="id3">id3</option>
</select>

Then your function can work like this:

function copyToClipboard() {
var copyids = {
    ids: [
        {
            name: "id1",
            id: 192389021,
        },
        {
            name: "id2",
            id: 123879032,
        },
        {
            name: "id3",
            id: 149018292,
        },
    ],
};

let selectedIndex = document.querySelector("select").selectedIndex;

navigator.clipboard.writeText(copyids[selectedIndex].name);

how to make a copy to clipboard button with js

4 Answers4