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 条评论
登录 后参与评论

相关文章

来自专栏吴伟祥

java web项目修改favicon.ico图标的方式

修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式

1654
来自专栏移动端开发

告诉你 iOS9.0 之后的Bitcode到底是什么!!

 用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过。看了下问题,报的是以下错误: ld: ‘/Users/**/Fr...

3998
来自专栏landv

如何破解Excel VBA密码

首先,如果文件格式是(.xslm),需要先打开Excel文件,另存为2003版格式(.xls)。

1.5K2

在Ubuntu 18.04上安装WordPress

WordPress是一个非常流行的专注于博客的动态内容管理系统(CMS)。WordPress可以部署在LAMP或LEMP堆栈上。它具有的可扩展插件框架和主题系统...

8791
来自专栏技术博客

VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置

   重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了。这两天一直在试终于搞定了。这里查找的问题当然主要是VS里面调式Jav...

1894
来自专栏源哥的专栏

由于网速引起的问题

我们经常会碰到这种情况,一个网页在一台电脑上运行没有什么问题,在另外一台电脑上就会报找不到属性的错误,这个是由于一般是由于我们触发某个事件时,这段js代码还没...

762
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度

打造前端 Deepin Linux 工作环境——调节鼠标滚轮速度 在 deepin 的系统设置里面,没有找到鼠标滚轮速度调节的选项。但是默认情况下,其滚轮的速度...

33310
来自专栏前端杂谈

广告等第三方应用嵌入到web页面方案 之 使用js片段

49811
来自专栏极客编程

ionic入门之AngularJS扩展

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android...

941
来自专栏一“技”之长

AppleWatch开发入门三——代码交互与控制器生命周期

        在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之后,就会生成Inte...

773

扫码关注云+社区

领取腾讯云代金券