专栏首页web开发html5页面实现点击复制功能

html5页面实现点击复制功能

在实际工作中,有时候会遇到这样的需求,页面上有一个链接,不需要选中链接内容,只需要点击复制按钮,就可以把链接内容复制到剪切板。这时候可以使用clipboard插件来实现。以下是一个简单的demo。

首先可以通过npm install clipboard --save-dev 来安装该插件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>

<h2>从属性里复制</h2>
<!--data-clipboard-text属性的值将会被复制-->
<div id="btn" class="js-copy" data-clipboard-text="111-从属性复制">
    <span>复制到剪切板-111</span>
</div>
<hr>

<h2>从另外一个元素复制内容</h2>
<textarea id="bar">222-从另外一个元素复制内容</textarea>
<button id="btn2" data-clipboard-target="#bar">复制到剪切板-222</button>
<hr>

<h2>JS里指定复制的内容
<button id="btn3" data-clipboard-target="#bar">复制到剪切板-333</button></h2>

<script>

    //从属性里复制
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);//实例化
    clipboard.on('success', function(e) {//复制成功执行的回调,可选
        console.log(e);
    });
    clipboard.on('error', function(e) {//复制失败执行的回调,可选
        console.log(e);
    });


    //从另外一个元素复制内容
    var btn2 = document.getElementById('btn2');
    var clipboard2 = new Clipboard(btn2);//实例化
    clipboard2.on('success', function(e) {//复制成功执行的回调,可选
        console.log(e);
    });
    clipboard2.on('error', function(e) {//复制失败执行的回调,可选
        console.log(e);
    });


    //JS里指定复制的内容
    var btn3 = document.getElementById('btn3');
    var clipboard3 = new Clipboard(btn3, {
        text: function() {
            return '333-JS里指定复制的内容';
        }
    });
    clipboard3.on('success', function(e) {//复制成功执行的回调,可选
        console.log(e);
    });
    clipboard3.on('error', function(e) {//复制失败执行的回调,可选
        console.log(e);
    });

</script>
</body>
</html>

效果图:

点击完复制按钮后,成功回调函数就会输出一个对象,该对象包含了复制的内容等信息。这个时候,在其他输入文字的地方使用粘贴快捷键就可以把剪切板的内容粘贴到你需要的地方了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue项目使用AES做加密

    用户1174387
  • 前端限制上传文件的类型

      今天在工作中遇到一个需求,需要在上传文件的时候限制上传文件的类型,比如上传图片的就只能上传图片类型的文件。 现将自己在开发中的代码放到我的博客里,以备在以后...

    用户1174387
  • VUE滚动条插件——vue-happy-scroll

    最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue...

    用户1174387
  • 关于颜色理论

    我的意思是,我不知道应该选择哪些颜色放在一起,完全凭感觉。于是昨天,我在网上找了一些资料,希望找到理论指导。

    ruanyf
  • 【一起来烧脑】一步学会TypeScript入门

    字符串新特性 变量和参数新特性 函数新特性 匿名函数 for of循环 TypeScript语言中的面向对象特性

    达达前端
  • 重读《JavaScript高级程序设计》

    ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数类型和数量)不...

    嘉明
  • 线程源码分析之mutex.c(基于linuxthreads2.0.1)

    theanarkh
  • Unity 3D 开发《王者荣耀》:Hello WorldUnity 安装《王者荣耀》 App Store 英文名称是 《Arena of Valor》GitHub for Unity:https

    iOSDevLog
  • 算法系列之二进制位+回溯递归

    题目:从 1~n 这 n 个整数中随机选取任意多个,输出所有可能的选择方案。输入:n 输出:多种方案 同一行内的数必须升序排列,相邻两个数用恰好1个空格隔开。

    公众号guangcity
  • js 函数作用域与this 的指向实例 原

    函数的定义分为2种,(1)直接定义-window 下,内部定义;(2)对象的方法(或对象原型的方法),下面的函数fn1与fn2 是直接定义的函数, doFun...

    tianyawhl

扫码关注云+社区

领取腾讯云代金券