js实现文本的复制粘贴的功能

最新推荐文章于 2024-04-24 09:22:16 发布

一直在梦想路上

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_24689783/article/details/78875776

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍的js复制粘贴功能的实现是借助于textarea和document.execCommand来实现将文本复制到粘贴板上，具体的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>copy</title>
    <style type="text/css">
        .top {
            width: 300px;
            height: 200px;
            position: absolute;
            z-index: 2;
            background: #fff;
            overflow: hidden;
        }
        .bottom {
            width: 300px;
            height: 200px;
            position: absolute;
            z-index: 1;
            overflow: hidden;
        }
        #btn {
            height:30px;
            text-align:center;
            border:1px #00a2ca solid;
            cursor:pointer
        };
        #btn:hover {
            background:#00a2ca;
            color:#fff
        };
    </style>
    <script type="text/javascript">
        var copy = function(){
            debugger;
            var wrapper = document.getElementById("wrapper");
            var content = document.getElementById("content");
            wrapper.value = content.innerHTML;
            wrapper.select();
            document.execCommand("Copy");
            alert("复制成功！");
        }
    </script>
</head>
<body>
    <!-- 通过遮罩将这个textarea隐藏起来，这样就不会影响页面的样式了 -->
    <div class="bottom">
        <textarea id="wrapper">dasdas</textarea>
    </div>
    <div class="top">
        <p id="content">dadasdasdas</p>
        <span id="btn" onclick="copy()">复制</span>
    </div>
</body>
</html>

一直在梦想路上

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现文本的复制粘贴的功能

本文介绍的js复制粘贴功能的实现是借助于textarea和document.execCommand来实现将文本复制到粘贴板上，具体的代码如下：<!DOCTYPE html><html><head> <title>copy</title> <style type="text/css"> .top { width: 300px;
复制链接

扫一扫