Question

Javascript 复制剪贴板

2016-12-28

6958

javascript html clipboard

我需要将文本复制到用户剪贴板。但由于某种原因，这个简单的代码片段不起作用（打印错误）

<html>
<head>
</head>
<body>
<textarea id="clip">Test</textarea>
<script>

    var ta = document.getElementById('clip');
    ta.focus();
    ta.select();

    setTimeout(function() {
        console.log(document.execCommand('copy'));
    }, 1000);

</script>
</body>
</html>

我做错了什么吗？有什么想法吗？

Answer 1

document.execCommand('copy') 必须作为用户操作的直接结果进行调用。

例如：点击事件处理程序。

Google 开发帖子： https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

更新： 它看起来像是重复的。我建议您查看类似主题的以下回复： https://stackoverflow.com/a/30810322/4754887

Answer 2

是的，你是对的。这有效

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="clip" style="position: absolute; left: 100px; top: -100px;">Test</textarea>
<button id="copyButton">Copy To Clipboard</button>
<script>

    document.getElementById('copyButton').addEventListener('click', function() {

        var ta = document.getElementById('clip');

        ta.innerHTML = "Test2";

        ta.focus();
        ta.select();

        console.log(document.execCommand('copy'));

    });

</script>
</body>
</html>

Answer 3

..或者更简单：

<html>
<head>
</head>
<body>
<textarea id="clip" onclick="copyToClp()">Test</textarea><!-- this executes copyToClp() function on user's click -->
<script>

var ta = document.getElementById('clip');
ta.focus();
ta.select();

function copyToClp(){
    console.log(document.execCommand('copy'));
}

</script>
</body>
</html>