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

强颜欢笑 提交于 2019-12-03 20:53:18

本文介绍的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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!