Clipboard.js实现复制文本到剪贴板功能

news2024/9/29 20:07:37

一、Clipboard.js简介

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。
官网地址：Clipboard.js
浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+

二、Clipboard.js安装

2.1、NPM安装

你可以在 npm 上获取它：
npm install clipboard --save

2.2、ZIP安装

如果您不喜欢包管理，只需下载ZIP文件即可：Clipboard.js的ZIP文件。

三、使用Clipboard.js

3.1、在页面引入clipboard.js

<script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>

现在，你需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化它。

3.2、从元素属性复制文本

事实是，您甚至不需要其他元素来复制其内容。您可以只在 trigger 元素中包含一个属性：data-clipboard-text。

<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a>

3.2.1、执行JS事件

<script type="text/javascript">
    let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容
    if (isCompatible) {
        let clipboard = new ClipboardJS('#copyBtn');
        clipboard.on('success', function (e) {
            console.log(e.text);
            $('#bar').val(e.text);
            console.log("文本已经复制到剪贴板！");
        });
        clipboard.on('error', function (e) {
            let cpoy_text = e.text;
            if (!cpoy_text) {
                alert("需要复制或剪切的内容为空！");
            }
        });
    }
</script>

3.2.2、执行JS事件效果

执行效果

3.3、从其他元素剪切文本

此外，您还可以定义一个属性来指定是否要或 content。data-clipboard-actioncopycut；如果省略此属性，则默认使用：copy

3.2.1、HTML代码

<textarea name="" id="bar"></textarea>
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a>

3.3.2、执行JS事件

<script type="text/javascript">
    let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容
    if (isCompatible) {
        let clipboard = new ClipboardJS('#copyBtn');
        clipboard.on('success', function (e) {
            console.log(e.text);
            $('#bar').val(e.text);
            console.log("文本已经复制到剪贴板！");
        });
        clipboard.on('error', function (e) {
            let cpoy_text = e.text;
            if (!cpoy_text) {
                alert("需要复制或剪切的内容为空！");
            }
        });
    }
</script>

3.3.3、执行JS事件效果

执行效果

3.4、以下是完整的HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clipboard.js实现复制文本到剪贴板功能</title>
    <script src="js/node_modules/jquery/dist/jquery.js" type="text/javascript"></script>
    <script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>
</head>

<body>
    <!-- 从其他元素剪切文本 -->
    <textarea name="" id="bar"></textarea>
    <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a>

    <!-- 从元素属性复制文本 -->
    <a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a>
    <textarea name="" id="bar"></textarea>


</body>

</html>
<script type="text/javascript">
    let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容
    if (isCompatible) {
        let clipboard = new ClipboardJS('#copyBtn');
        clipboard.on('success', function (e) {
            console.log(e.text);
            $('#bar').val(e.text);
            console.log("文本已经复制到剪贴板！");
        });
        clipboard.on('error', function (e) {
            let cpoy_text = e.text;
            if (!cpoy_text) {
                alert("需要复制或剪切的内容为空！");
            }
        });
    }
</script>