javascript实现将内容复制到系统剪切板功能

最新推荐文章于 2022-12-09 19:00:28 发布

靳先生.

最新推荐文章于 2022-12-09 19:00:28 发布

阅读量288

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_42723113/article/details/104974263

版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个实用的JavaScript技巧，通过简单的代码实现将指定文本一键复制到系统剪切板的功能。此功能适用于各种场景，如一键复制工具、设计师提色工具等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好几天没有更新内容了，原因是这段时间心里不舒服，很烦的那种，不过终于还是满血复活了，这几天事情也比较多，现在闲了下来，更新一个简单功能：

使用js实现将内容复制到系统剪切板

我就不废话了，直接上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript实现将内容复制到系统剪切板功能</title>
    <style>
        #copytext {
            position: fixed;
            top: 0;
            left: -9999px;
        }
        #copy{cursor:pointer;}
    </style>
</head>

<body>
    <div id="text">我是你要复制的文本哦</div>
    <span id="copy">点击复制</span>
    <input type="text" id="copytext">
    <!-- <script src="js/script.js"></script> -->
    <script>
        document.getElementById("copy").onclick=function(){
            var text = document.getElementById("text").innerText;
            var input = document.getElementById("copytext");
            input.value = text; // 修改文本框的内容
            input.select(); // 选中文本
            document.execCommand("copy"); // 执行浏览器复制命令
            alert("复制成功");
        }
    </script>
</body>

</html>

这就是一个简单的小功能，有时候网站会出现这种需要的功能

首先先用css将文本框隐藏掉，其实还是存在只是你看不到它了，这个功能呢，可以开发一些小工具，比如弄一个渣男语录等等的，就可以实现一键复制，我前几天开发的设计师提色工具就用到了这个功能

这次没有图片，你们自己可以试一下吧

疫情好转，你们一定要幸福哦！