CODEWITHSUNDEEP
javascriptjqueryhtmlxhtml
Mohit
Mohit

Reputation: 13

How to copy to clipboard with multiple button ids using jquery

I am trying to copy data on clipboard onclick event, but I am unable to do it for multiple input ids. Here is my code and reference stackoverflow url: Using execCommand (Javascript) to copy hidden text to clipboard

and my code for request is:

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="copy-me" value="mohit text" type="text" class="copy">
<button id="copy-btn" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<input id="copy-me1" value="mohit text2" type="text" class="copy">
<button id="copy-btn1" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<input id="copy-me2" value="mohit text3" type="text" class="copy">
<button id="copy-btn2" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<textarea placeholder="paste here"></textarea>
<script type="text/javascript">
    function idname(a, b)
    {
        alert(a);
        var copyBtn = $(a),
                input = $(b);
        copyBtn.on('click', copyToClipboard);
        function copyToClipboardFF(text) {
            window.prompt("Copy to clipboard: Ctrl C, Enter", text);
        }
        function copyToClipboard() {
            var success = true,
                    range = document.createRange(),
                    selection;
            // For IE.
            if (window.clipboardData) {
                window.clipboardData.setData("Text", input.val());
            } else {
                // Create a temporary element off screen.
                var tmpElem = $('<div>');
                tmpElem.css({
                    position: "absolute",
                    left: "-1000px",
                    top: "-1000px",
                });
                // Add the input value to the temp element.
                tmpElem.text(input.val());
                $("body").append(tmpElem);
                // Select temp element.
                range.selectNodeContents(tmpElem.get(0));
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                // Lets copy.
                try {
                    success = document.execCommand("copy", false, null);
                }
                catch (e) {
                    copyToClipboardFF(input.val());
                }
                if (success) {
                    alert("The text is on the clipboard, try to paste it!");
                    // remove temp element.
                    tmpElem.remove();
                }
            }
        }
    }

</script>

Upvotes: 1

Views: 3338

Answers (1)

Michael
Michael

Reputation: 125

Try it this way (there's no need for your additional wrapper function idname):

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="copy-me" value="mohit text" type="text" class="copy">
<button id="copy-btn" onclick="copyToClipboard('#copy-me')">Copy</button><br><br>
<input id="copy-me1" value="mohit text2" type="text" class="copy">
<button id="copy-btn1" onclick="copyToClipboard('#copy-me1')">Copy</button><br><br>
<input id="copy-me2" value="mohit text3" type="text" class="copy">
<button id="copy-btn2" onclick="copyToClipboard('#copy-me2')">Copy</button><br><br>
<textarea placeholder="paste here"></textarea>
<script type="text/javascript">

       function copyToClipboardFF(text) {
            window.prompt("Copy to clipboard: Ctrl C, Enter", text);
        }

        function copyToClipboard(inputId) {
        var input = $(inputId);
            var success = true,
                    range = document.createRange(),
                    selection;
            // For IE.
            if (window.clipboardData) {
                window.clipboardData.setData("Text", input.val());
            } else {
                // Create a temporary element off screen.
                var tmpElem = $('<div>');
                tmpElem.css({
                    position: "absolute",
                    left: "-1000px",
                    top: "-1000px",
                });
                // Add the input value to the temp element.
                tmpElem.text(input.val());
                $("body").append(tmpElem);
                // Select temp element.
                range.selectNodeContents(tmpElem.get(0));
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                // Lets copy.
                try {
                    success = document.execCommand("copy", false, null);
                }
                catch (e) {
                    copyToClipboardFF(input.val());
                }
                if (success) {
                    alert("The text is on the clipboard, try to paste it!");
                    // remove temp element.
                    tmpElem.remove();
                }
            }
        }

</script>

Upvotes: 2

Related Questions