CODEWITHSUNDEEP
clipboardcopy-paste
Mayank Pandya
Mayank Pandya

Reputation: 1623

Copy to clipboard option

I search many different ways for performing a copy to user clipboard option from web page. like using flash, using browser specific java script but which is the best way for cross browser copy to clipboard functionality ??...

Upvotes: 2

Views: 348

Answers (3)

Abi Harrison
Abi Harrison

Reputation: 39

Without using an external library, you can do it with fairly simple JavaScript. createPlaceholder() is needed for all of the copy functions. The others are named for what they'd copy.

function createPlaceholder(toCopy) {
    var placeholder = document.createElement("input");
    document.body.appendChild(placeholder);
    placeholder.value = toCopy;
    placeholder.select();
    document.execCommand("copy");
    document.body.removeChild(placeholder);
}

function copyText(text) {
    createPlaceholder(text.children[0].innerText);
}

function copyUtility(text) {
    createPlaceholder(text.children[0].children[0].innerText);
}

function copySvgUrl(svg) {
    do svg = svg.parentNode.children[0];
    while (svg && svg.nodeType != 1);
    createPlaceholder(svg.attributes["href"].value);
}

function copySvgCode(thisSvg) {
    do thisSvg = thisSvg.parentNode.children[0].children[0].children[0];
    while (thisSvg && thisSvg.nodeType != 1);
    var s = new XMLSerializer();
    thisSvg = s.serializeToString(thisSvg);
    createPlaceholder(thisSvg);
}

function copyCode(code) {
    createPlaceholder(code.parentNode.parentNode.children[1].children[0].innerText);
    code.children[0].children[0].innerText = "Copied ";
}

This is the HTML I have that it links to...

<!-- COPY TEXT -->
        <table>
            <tr>
                <td onclick="copyText(this)">Hello world</td>
                <td onclick="copyText(this)">Hello everyone</td>
                <td onclick="copyText(this)">Hello you</td>
            </tr>
        </table>

        <!-- COPY SVG URL AND CODE -->
        <ul>
            <li>
                <a href="ENTER SVG LINK HERE">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
                            <path d="ENTER SVG PATH CODE HERE">
                            </path>
                        </svg>
                    </div>

                    <span>NAME OF ICON</span>
                </a>

                <button onclick="copySvgUrl(this)">Copy SVG URL</button>
                <button onclick="copySvgCode(this)">Copy SVG code</button>
            </li>
        </ul>

        <!-- COPY CODE BLOCK -->
        <details>
            <summary>View code
                <button onclick="copyCode(this)">
                </button>
            </summary>
            <pre>
            <code>THIS IS THE CODE THAT YOU'LL BE COPYING</code>
        </pre>
        </details>

        <!-- COPY UTILITY CLASS -->
        <table>
            <tr>
                <td>Utility class: </td>
                <td onclick="copyUtility(this)">
                    <span title="Click to copy this text">
                        <code>UTILITY CLASS TO BE COPIED</code>
                    </span>
                </td>
            </tr>
        </table>
    </section>

Just fill in the bits I've capitalised, and readjust the format of your HTML to how you want it (bits of JS might need to be adjusted, as they use parent and child selectors to get the correct item to be copied).

Upvotes: 0

Baraa
Baraa

Reputation: 1361

I know this answer is coming a bit late, but there is now a new modern alternative to Flash based solutions. Clipboard.js is a 2kB pure JavaScript alternative that has no dependencies.

Upvotes: 1

jon
jon

Reputation: 6246

See here: http://code.google.com/p/zeroclipboard/

Upvotes: 0

Related Questions