Copy to clipboard in javascript doesn't work properly

Question

I have the following code:

$(document).ready(function () {
            var usernames = ["user1", "user2", "user3", "user4", "user5", "user6", "user7"];
            var ids = ["76561199144601203", "76561199085110484", "76561199202629307", "76561198977492126", "76561199107090117", "76561199156985347", "76561199195037086"];
            var part = '';
            for (var i = 0; i < usernames.length; i++) {
                $('#user_id_table > tbody:last-child').append('<tr><th scope="row">' + usernames[i] + '</th><td><button onclick="CopyIdToClipboard(' + ids[i] + ')">' + ids[i] + '</button></td></tr>');
            }
        });

        function CopyIdToClipboard(text) {
            // Create a temporary input element
            var $tempInput = $('<input type="text">');
            $('body').append($tempInput);

            // Set the value of the temporary input element to the text
            $tempInput.val(text).select();

            // Copy the text to the clipboard
            document.execCommand('copy');

            // Remove the temporary input element
            $tempInput.remove();

            alert("Copied the text: " + text);
        }

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>
    <!-- Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="container">
        <div class="row">
            <table class="table border" id="user_id_table">
                <thead>
                    <tr>
                        <th scope="col">USERNAME</th>
                        <th scope="col">ID</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
</body>

</html>

My problem is when I press the button to copy to clipboard, in the alert and in my clipboard there is a round up of the ID even if it is a string, the first two numbers change. Example: The first one(76561199144601203) gives me this "76561199144601200"

It shouldn't change anything, it should only get copied to the clipboard. I tried other approches like navigator.clipboard.writeText() but the result is the same.

What I'm doing wrong? Anyone can help?

Welcome to StackOverflow. Please review: https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard You may need to `focus` on the element. You may also want to add `type='text'` to ensure it does not default to something else, like Number. If you want more help, please provide a [mcve] — Twisty, Jul 13 '23 at 23:32
Your input data (with two separate arrays) is quite odd. Use rather this data model: `const users = [{name:"foo", id:"123"}, {name:"bar", id:"987"}]` or rather: `const users = {123: {name:"foo"}, 987: {name: "bar"}}` since IDs are unique anyways. — Roko C. Buljan, Jul 13 '23 at 23:41
**Your code works**... but you have a small typo: use Dev tools to debug your own code. Instead of `to_copy` you need to use `text` argument. — Roko C. Buljan, Jul 13 '23 at 23:53
Basically a duplicate of: https://stackoverflow.com/a/33337109/383904 — Roko C. Buljan, Jul 13 '23 at 23:57
@RokoC.Buljan the typo is a copy (from code to StackOverflow) mistake related, I was changing code while I was creating the question here, it doesn't affect my problem, it still rounds down — DevDoctor, Jul 14 '23 at 00:00
@RokoC.Buljan it isn't a duplicate, this is a copy problem not a how to copy. I tried every method demostrated in that post an they gives me the same result — DevDoctor, Jul 14 '23 at 00:22
@Twisty I added a "code snippet". I tried adding **type='text'** but gives me the same result — DevDoctor, Jul 14 '23 at 00:23

Paul T. · Accepted Answer · 2023-07-14T02:20:13.147

With some slight rework of the CopyIdToClipboard function to use the button element to get the text, try the runnable example below.

Basically the changes are all in the javascript handling:

In the loop where the buttons are added, the onclick event changes to: onclick="CopyIdToClipboard(this)" ... (this is a reference to the button element itself)
The parameter to CopyIdToClipboard changes from text to element (as it is now an element reference, and not text)
To the val(), the button element's textContent is set as the value. (the button's text)

$(document).ready(function () {
            var usernames = ["user1", "user2", "user3", "user4", "user5", "user6", "user7"];
            var ids = ["76561199144601203", "76561199085110484", "76561199202629307", "76561198977492126", "76561199107090117", "76561199156985347", "76561199195037086"];
            var part = '';
            for (var i = 0; i < usernames.length; i++) {
                $('#user_id_table > tbody:last-child').append('<tr><th scope="row">' + usernames[i] + '</th><td><button onclick="CopyIdToClipboard(this)">' + ids[i] + '</button></td></tr>');
            }
        });

        function CopyIdToClipboard(element) {
            // Create a temporary input element
            var $tempInput = $('<input type="text">');
            $('body').append($tempInput);

            // Set the value of the temporary input element to the text
            $tempInput.val(element.textContent).select();
                     // note that .innerHTML works too

            // Copy the text to the clipboard
            document.execCommand('copy');

            // Remove the temporary input element
            $tempInput.remove();

            alert("Copied the text: " + element.innerHTML);
        }

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>
    <!-- Jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="container">
        <div class="row">
            <table class="table border" id="user_id_table">
                <thead>
                    <tr>
                        <th scope="col">USERNAME</th>
                        <th scope="col">ID</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
</body>

</html>

Copy to clipboard in javascript doesn't work properly

1 Answers1