js实现pc浏览器复制粘贴功能

最新推荐文章于 2024-06-22 14:01:29 发布

xlb_123

最新推荐文章于 2024-06-22 14:01:29 发布

阅读量3k

点赞数

分类专栏： js相关 web前端开发文章标签：复制粘贴

本文链接：https://blog.csdn.net/qq736150416/article/details/72845179

版权

本文介绍了如何在PC浏览器中实现复制和粘贴功能，通过引用clipboard.min.js库，结合页面按钮和事件监听，实现对文章标题、内容和链接的复制。当用户点击相应的复制按钮时，会触发成功提示并完成复制操作。

摘要由CSDN通过智能技术生成

以下适用pc浏览器，移动端复制这贴貌似有些不兼容

(1)首先引用clipboard.min.js：页面底部有js

(2)页面添加js

(3)页面按钮标签：

<div class="qr_code_pc" style="width: 180px; right:10px;top:20px; box-shadow: rgba(30, 30, 30, 0.027451) 2px 4px 16px; border: 1px solid rgb(222, 222, 222);">
    <div class="right-step-box-title"><span style="font-size: 14px;">（正常复制粘贴）</span></div>
    <div class="ant-steps ant-steps-vertical">
        <div class="ant-steps-item ant-steps-status-process"><div class="ant-steps-tail"><i></i></div><div class="ant-steps-step"><div class="ant-steps-head"><div class="ant-steps-head-inner"><span class="ant-steps-icon">1</span></div></div><div class="ant-steps-main"><div class="ant-steps-title"><button type="button" class="exp u-btn u-btn-primary u-btn-small" data-clipboard-text="我在复制的文章的标题文字">复制文章标题</button></div></div></div></div>
        <div class="ant-steps-item ant-steps-status-wait"><div class="ant-steps-tail"><i></i></div><div class="ant-steps-step"><div class="ant-steps-head"><div class="ant-steps-head-inner"><span class="ant-steps-icon">2</span></div></div><div class="ant-steps-main"><div class="ant-steps-title"><button type="button" class="exp u-btn u-btn-primary u-btn-small" data-clipboard-action="copy" data-clipboard-target="#js_content"><span>复制文章内容</span></button></div></div></div></div>
        <div class="ant-steps-item ant-steps-status-wait"><div class="ant-steps-step"><div class="ant-steps-head"><div class="ant-steps-head-inner"><span class="ant-steps-icon">3</span></div></div><div class="ant-steps-main"><div class="ant-steps-title"><button type="button" class="exp u-btn u-btn-primary u-btn-small" data-clipboard-acti