[英]Javascript Copy 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>
我做错什么了吗? 有任何想法吗?
作为用户操作的直接结果,必须调用document.execCommand('copy')
。
例如:单击事件处理程序。
Google开发人员职位: https : //developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=zh-CN
更新:它看起来像一个重复。 我建议您检查有关类似主题的以下响应: https : //stackoverflow.com/a/30810322/4754887
是的,你是对的。 这工作
<!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>
..或更简单:
<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>
实际上,您应该使用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标记等)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.