当前位置:首页 > 前端 > javascript > js实现手机、PC站一键复制功能

js实现手机、PC站一键复制功能

DChen3年前 (2021-05-31)javascript1.72 K0

网页文字复制、h5文字复制、代码块复制在现在都算是比较常见的了,可能也有一些人并不知道,其实这个在百度上一搜其实也是很容易就找到的,其实也很简单。下面便直接开始关于js如何去实现一键复制的功能

效果图:js实现手机、PC站一键复制功能  js 复制 第1张

代码如下:

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <title></title>
    <style>
        body {
            padding: 20px;
            text-align: left;
        }

        .copytxt {
            opacity: 0; /*不可以用display:none和 visibility: hidden;*/
        }

        .dp-content {

            color: #5a5a5a;
            line-height: 25px;

        }

        strong {

            font-size: 16px;
        }

        a {

            display: block;
            padding: 10px;
            border-radius: 3px;
            text-decoration: none;
            text-align: center !important;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<strong>复制的内容:</strong>
<p class="dp-content">这里是需要一键复制的内容。</p>
<br/>
<a href="javascript:;" onclick="copyUrl()">点我一键复制</a>
<span class="copytxt">复制内容</span>

<script>
    function copyUrl() {
        document.getElementsByClassName("copytxt")[0].innerText = "这里是需要一键复制的内容。";
        const range = document.createRange();
        range.selectnode(document.querySelector(".copytxt"));
        const selection = window.getSelection();
        if (selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('Copy');
        alert("复制成功,直接粘贴就可以了。");
    }
</script>
</body>
</html>


取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明:本文由“憨小猪”发布,如需转载请注明出处。

本文链接:https://www.phper.red/post/99.html

标签: js复制

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。