关于复制文字按钮

最新推荐文章于 2024-04-29 10:16:13 发布

ouqi_qiou

最新推荐文章于 2024-04-29 10:16:13 发布

阅读量1.8k

点赞数 1

分类专栏： HTML5前端开发文章标签： css

本文链接：https://blog.csdn.net/ouqi_qiou/article/details/74936227

版权

HTML5前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

关于复制文字按钮

图片展示：

这里写图片描述

注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。

代码块

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <style type="text/css">
        *{
            -webkit-user-select: auto;
        }
    </style>

    <body>
        <span id="content">
            你好，好久不见！
        </span>
        <button id="copyBT">复制</button>
        <script>
            function copyArticle(event) {
                const range = document.createRange();
                range.selectNode(document.getElementById('content'));

                const selection = window.getSelection();
                if(selection.rangeCount > 0) selection.removeAllRanges();
                selection.addRange(range);
                document.execCommand('copy');
                alert("复制成功！");
            }

            document.getElementById('copyBT').addEventListener('click', copyArticle, false);
        </script>
    </body>

</html>

ouqi_qiou

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
关于复制文字按钮

关于复制文字按钮图片展示：注意css中的样式，有些页面复制不成功就是没有添加那一句造成的。代码块<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style type="text/css"> *
复制链接

扫一扫