在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用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. Day2 基本数据类型

    一.python数据类型 1.1数字 2 是一个整数的例子. 长整数 不过是大一些的整数. 3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4 ...

  2. python文件名和文件路径操作

    Readme: 在日常工作中,我们常常涉及到有关文件名和文件路径的操作,在python里的os标准模块为我们提供了文件操作的各类函数,本文将分别介绍"获得当前路径""获得 ...

  3. 解决外部编辑器修改Eclipse文件延迟刷新【补充】

    在之前的文章,使用gulp解决外部编辑器修改Eclipse文件延迟刷新,原理是用gulp把更改过的项目文件直接复制一份到Tomcat的webapp.root下, 现在补充另外一种方法,双击Server ...

  4. JSP入门 导出文件

    1.图片校验码 <img  src="captcha.jpg"  /> web.xml配置 <servlet>      <servlet-name& ...

  5. 【ASP.NET MVC】jqGrid 增删改查详解

    1   概述 本篇文章主要是关于JqGrid的,主要功能包括使用JqGrid增删查改,导入导出,废话不多说,直接进入正题. 2   Demo相关 2.1   Demo展示 第一部分 第二部分 2.2 ...

  6. SUM游戏

    题意:就是有一个长度为n的整数序列,两个游戏者A和B轮流取数,A先取.每次玩家只能从左端或者右端取任意数量个数,但不能两端都取. 所有数都被取走后游戏结束,然后统计每个人取走的所有数之和,作为各自的得 ...

  7. eclipse建立一个jsp项目遇到的问题及解决

    打开eclipse  在workplace 区域空白处,右键 填写好Project name,之后,点击finished 即可. 选中webcontent,新建一个文件夹,并新建一个jsp 文件 新建 ...

  8. HIVE---基于Hadoop的数据仓库工具讲解

    Hadoop: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用来开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...

  9. Crossin-8-1;8-2课程记录

    打开文件:    open,注意打开文件的路径    读取结束需使用close读取文件:    read    readlines    readline    for in 重置光标位置:   se ...

  10. Jquery EasyUI Base基础

    <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...