Question

我使用JavaScript创建input，将其填充数据，然后将value复制到剪贴板。不幸的是，没有任何东西被复制。为什么这种方式无法正常工作？

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Copy test</title>
    <style>html{background: #000;}</style>
</head>
<body>
    <button type="button" id="testButton">Copy</button>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let button = document.getElementById('testButton');

            button.addEventListener('click', () => {
                let el = document.createElement('input');

                // fill input with values
                el.setAttribute('type', 'text');
                el.setAttribute('value', 'text to copy');

                // try to copy
                el.select();
                document.execCommand('copy');

                console.log("OK");
            });
        });
    </script>
</body>
</html>

Answer 1

该API未被浏览器广泛支持，所以这可能是一个原因。我建议您改用https://www.npmjs.com/package/clipboard，而不必考虑跨浏览器的问题。

如果您仍然想使用代码，那么我想是因为您没有将此元素附加到DOM。

工作片段：

 button.addEventListener('click', () => {
            let el = document.createElement('input');

            document.body.appendChild(el);

            // fill input with values
            el.setAttribute('type', 'text');
            el.setAttribute('value', 'text to copy');
            // try to copy
            el.select();
            document.execCommand('copy');
            el.remove()
            console.log("OK");
        });

通过临时<input>将文本复制到剪贴板

1 个答案: