JS(JavaScript)复制内容到剪贴板的两种方式
- JavaScript
- 2024-07-19
- 285热度
- 0评论
在 HTML 中复制内容到剪贴板有两种方式。
使用 JavaScript 代码,
使用 HTML5 中的 Clipboard API。
使用 JavaScript 代码复制内容到剪贴板
<button onclick="copyToClipboard('Hello, world!')">复制到剪贴板</button>
<script>
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
</script>
这里创建了一个按钮,当用户单击按钮时,它会调用 copyToClipboard() 函数并将 Hello, world! 传递给它。copyToClipboard() 函数创建了一个 textarea 元素,将要复制的文本设置为它的值,然后选中它,并执行 document.execCommand(“copy”) 命令将其复制到剪贴板中。
使用 Clipboard API 复制内容到剪贴板
<button id="copyBtn">复制到剪贴板</button>
<script>
var copyBtn = document.querySelector("#copyBtn");
copyBtn.addEventListener("click", function(event) {
event.preventDefault();
var text = "Hello, world!";
navigator.clipboard.writeText(text).then(function() {
console.log("复制成功!");
}, function() {
console.log("复制失败!");
});
});
</script>
这里使用了 Clipboard API 的 navigator.clipboard.writeText() 方法。当用户单击按钮时,它会调用 writeText() 方法并将文本 Hello, world! 传递给它。
如果复制成功,则在控制台中打印“复制成功!”,否则打印“复制失败!”。
请注意,此方法需要浏览器支持 Clipboard API,而在某些浏览器中可能需要用户授权允许网站访问剪贴板。