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

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

在 HTML 中复制内容到剪贴板有两种方式。一种方式是使用 JavaScript 代码,另一种方式则使用 HTML5 中的 Clipboard API。

使用 JavaScript 代码复制内容到剪贴板:

html 复制代码
<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 复制内容到剪贴板:

html 复制代码
<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演示代码

html 复制代码
<!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";
        });
        // element
        new 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>
相关推荐
iphone1084 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
留不住丨晚霞18 分钟前
说说SpringBoot常用的注解?
java·开发语言
hardStudy_h28 分钟前
C++——内联函数与Lambda表达式
开发语言·jvm·c++
iccb101332 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
宇宙全栈Link37 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny37 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝38 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
归于尽39 分钟前
原生JS与React的事件差异
前端·javascript·react.js
艾莉丝努力练剑1 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
独立开阀者_FwtCoder1 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js