Javascript复制剪贴板

时间:2016-12-28 09:58:04

标签: 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>

我做错了吗? 任何想法?

4 个答案:

答案 0 :(得分:1)

必须将

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

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

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

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

答案 1 :(得分:0)

是的,你是对的。 这是有效的

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

答案 2 :(得分:0)

..或更简单:

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

答案 3 :(得分:0)

实际上,您应该使用Document.execCommand()(正如您所做)和(非常酷)JavaScript Selection API

Selection API允许您以编程方式从页面上的任何HTML元素中选择文本,它的工作方式与按键盘上的CTRL + C完全相同。用于快速抓取URL,长文本,SSH密钥,只需单击一下。

您可以尝试这样的事情:

var button = document.getElementById("yourButtonId");
var content = document.getElementById("yourContentElement");

button.addEventListener("click", function() {
    // Define range and selection.
    var range = document.createRange();
    var selection = window.getSelection();

    // Clear selection from any previous data.
    selection.removeAllRanges();

    range.selectNodeContents(content);
    selection.addRange(range);

    // Copy to clipboard.
    document.execCommand('copy');
}, false);

编辑:此方法的一个优点是,您可以在复制后复制剪贴板中的内容(转义代码,格式化数字或日期,大写,小写,更改HTML标记等)。