CClown

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

作者:cece 时间:2020-03-19 浏览量(151)

好几天没有更新内容了,原因是这段时间心里不舒服,很烦的那种,不过终于还是满血复活了,这几天事情也比较多,接了几个单子,现在闲了下来(我不怕闲啊,赶紧多来点单子吧),更新一个简单功能:

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

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

疫情好转,你们一定要幸福哦!

给我多来几个单子吧,么么...

文章标签:

本文选自CClown的原创文章,转载请注明内容来源:CClown(https://blog.cclown.com/post/33.html)

评论:

验证码