JavaScript代码和Clipboard API复制内容到剪贴板的两种方式

本文主要是介绍JavaScript代码和Clipboard API复制内容到剪贴板的两种方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript代码和Clipboard API复制内容到剪贴板的两种方式

在 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，而在某些浏览器中可能需要用户授权允许网站访问剪贴板。

Demo演示代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title></title><!--自适应屏幕 取消用户对页面进行缩放的能力，并固定初始缩放比例为1--><!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>img {width: 300px;border-radius: 10px;}</style>
</head><body><div id="app"><el-card class="box-card"><el-image :src="src"><div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div></el-image><el-button :plain="true" @click="open" id="copyBtn">复制微信号</el-button></el-card></div><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>// 复制微信var copyBtn = document.querySelector("#copyBtn");copyBtn.addEventListener("click", function (event) {event.preventDefault();var text = "zqwlkeji208";});// elementnew Vue({el: '#app',data: function () {return {src: '请修改为自己的URL参数'}},methods: {open() {this.$message({message: '微信复制成功！',type: 'success'});const audio = new Audio('https://www.foxihaohao.com/weixin/tips.mp3');audio.play();},}})</script>
</body>
</html>