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

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

首先可以通过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>

效果图：

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

html5页面实现点击复制功能的更多相关文章

  1. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

  2. 在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？

    如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步.用Chrome打开要调试的页面: 第二步.按F12,打开“开发者工具”,点击其右上角的“Dock ...

  3. juqery 实现 防止当前页面重复点击，以减轻服务器压力

    <script> //防止当前页面重复点击,以减轻服务器压力 $(document).ready(function () { var current_url = location.path ...

  4. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  5. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  6. 七、Selenium与phantomJS----------动态页面模拟点击、网站模拟登录

    每天一个小实例1(动态页面模拟点击,并爬取你想搜索的职位信息) from selenium import webdriver from bs4 import BeautifulSoup # 调用环境变 ...

  7. ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

  8. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  9. html5页面与android页面之间通过url传递参数

    html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url  ?后面,js获取url  ?号后面的参数. 方法一: <scrīpt> /* 用途 ...

随机推荐

  1. C的函数指针与指针函数

    1.函数指针 指向函数的指针.本质是一个指针. 指针变量可以指向变量的地址.数组.字符串.动态分配地址,同时也可指向一个函数,每个函数在编译的时候,系统会分配给该函数一个入口地址,函数名表示这个入口地 ...

  2. 为ASP.NetCore程序启用SSL

    紧接着上一篇搭建连接MySql的三层架构的ASP.NetCore2.0的WebApi的案例,这篇来实现为ASP.NetCore启用SSL支持 由于ASP.NetCore默认服务器Kestrel不像ii ...

  3. Maven实战1

    屏上得来终觉浅,绝知此事要躬行 总结: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; c ...

  4. java中属性，set get 以及如何学习类的一些用法

    1,先来看一个例子 package com.tdq.java; public class Run { public static void main(String[]args){ Student st ...

  5. zoj3710 friends（floyd变形）

    Friends Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice lives in the country where people li ...

  6. SQLite中的时间日期函数

    SQLite包含了如下时间/日期函数: datetime().......................产生日期和时间 date()...........................产生日期 t ...

  7. sbt 配置文件

    配置文件名:application.conf, VM options: -Dconfig.file=application.conf 配置文件内容规范: openStrategy{ alive { a ...

  8. Hibernate 学习笔记 - 1

    一.Hibernate 的环境搭建.配置及 HelloWorld 1.在 Eclipse 中搭建 Hibernate 环境 下载 Hibernate 离线 jar 包(jbosstools-4.4.4 ...

  9. 【机器学习实战】第7章 集成方法 ensemble method

    第7章 集成方法 ensemble method 集成方法: ensemble method(元算法: meta algorithm) 概述 概念:是对其他算法进行组合的一种形式. 通俗来说: 当做重 ...

  10. bzoj1812 [Ioi2005]riv

    riv 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄--名叫B ...