使用js实现复制功能

野性酷女 2022-06-08 10:28 219阅读 0赞

首先下载 复制文件所需的js文件

[https://github.com/zenorocha/clipboard.js][https_github.com_zenorocha_clipboard.js]

![Image 1][]

点击这里下载源码

然后写测试

复制我的这段代码，将js文件引入进来

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>function-target</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
         
        <script src="js/clipboard.js"></script>
    
    
    </head>
    <body>
        <button class="btn">Copy</button>
        <div>点击按钮复制内容</div>
    
    
      <br />
      <input type="text"  placeholder="请在这里测试复制功能" />
        <script>
        var clipboard = new Clipboard('.btn', {
            target: function() {
                return document.querySelector('div');
            }
        });
    
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>

打开 网页点击 即可复制，你需求什么就改什么即可。

下载的js里demo文件夹下也有各种例子 可以去尝试一下

[https_github.com_zenorocha_clipboard.js]: https://github.com/zenorocha/clipboard.js
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现复制粘贴功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...

本是古典何须时尚/ 2024年04月18日 21:58/ 0 赞/ 9 阅读

相关使用JS实现打印功能

文章目录直接上代码效果如图 > 通常我们会遇到打印报表或者页面内容，这里介绍一种很方便只有几行代码就能实现打印需求的方法。直接上代码

女爷i/ 2022年12月17日 08:56/ 0 赞/ 136 阅读

相关 JS复制功能 Clipboard

Clipboard [http://www.clipboardjs

女爷i/ 2022年12月17日 07:17/ 0 赞/ 100 阅读

相关使用js实现点击复制功能的代码

使用js实现点击复制功能的代码 <!doctype html> <html> <head> <meta

不念不忘少年蓝@/ 2022年10月25日 01:22/ 0 赞/ 262 阅读

相关 js实现点击按钮复制文本功能

最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板之前做过复制输入框的内容，原以为差不多，结果发现根本行不通尝试了各种办法，最后使了个障眼法，实现了下面

女爷i/ 2022年08月28日 06:59/ 0 赞/ 226 阅读

相关 JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试，只是测试了几个手机，介绍：支持情况（1）移动端： 1. chrome（版本 58.0.3029.96 (64

柔光的暖阳◎/ 2022年06月15日 04:57/ 0 赞/ 185 阅读

相关使用js实现复制功能

首先下载复制文件所需的js文件 [https://github.com/zenorocha/clipboard.js][https_github.com_zeno

野性酷女/ 2022年06月08日 10:28/ 0 赞/ 220 阅读

相关使用clipboard.js实现复制功能

最近在开发中，使用原生js复制时，发现在360 7.1的低版本中无法实现代码的复制，随后便网上找了插件实现复制功能，检验后，发现在低版本也支持 demo： <i

青旅半醒/ 2022年05月23日 07:11/ 0 赞/ 188 阅读

相关 clipboard.js复制功能实现

前言 clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。具体使用 1.简单的demo <!DOCTYPE html>

拼搏现实的明天。/ 2022年05月18日 09:05/ 0 赞/ 219 阅读

相关 js 实现一键复制功能

// html <textarea name="" id="" cols="30" rows="10"></textarea>

心已赠人/ 2021年08月13日 11:29/ 0 赞/ 603 阅读