时间戳

首页 > 解决方案 > 通过临时将文本复制到剪贴板

javascript - 通过临时将文本复制到剪贴板

问题描述

使用 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>

标签： javascript

解决方案

这个 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");
        });

推荐阅读