如何使用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

Answer 1

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

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

Answer 3

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>