Question

我从网页上搜索了许多不同的方法来执行用户剪贴板选项的复制。比如使用flash，使用浏览器特定的java脚本，但这是跨浏览器复制到剪贴板功能的最佳方式?? ...

Answer 1

我知道这个答案有点晚了，但现在有一种基于Flash的解决方案的新现代替代方案。 Clipboard.js是 2kB纯JavaScript 备选方案，具有无依赖关系。

Answer 2

见这里： http://code.google.com/p/zeroclipboard/

Answer 3

无需使用外部库，您可以使用相当简单的 JavaScript 来完成。所有复制函数都需要 createPlaceholder()。其他人以他们要复制的内容命名。

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 ";
}

这是我链接到的 HTML...

<!-- 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>

只需填写我已经大写的部分，然后将 HTML 的格式重新调整为您想要的格式（JS 的部分可能需要调整，因为它们使用父和子选择器来获取要复制的正确项目).

复制到剪贴板选项

3 个答案: