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

    二.流程控制语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript中的主要语法,语句通常由一个或者多个关键字来完成给定的任务.诸如:判断.循环.退出等.   语句的定义   在E ...

  2. TEXT宏

    TEXT宏是windows程序设计中经常遇到的宏,定义在 <winnt.h>中 TCHAR *P = TEXT("this is a const string"); 如 ...

  3. 玩转 sublime3 第二弹 ES6环境

    安装node: node作为JS的运行环境必须安装 文件下载:https://nodejs.org/dist/v6.11.4/node-v6.11.4-x64.msi 备注:可以去官网 https:/ ...

  4. 最常用前端框架BootStrap——栅格系统

      前  言   Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mix ...

  5. 技术领导（Technical Leader）画像

    程序员都讨厌被管理,而乐于被领导.管理的角色由PM(project manager)扮演,具体来说,PM负责提需求.改改改.大多数情况,PM是不懂技术的,这也是程序员觉得PM难以沟通的原因.而后者由技 ...

  6. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  7. Python实战之set学习笔记及简单练习

    ['__and__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...

  8. java web 学习笔记 编码问题总结

       java web 学习笔记 编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...

  9. Myeclipse 配置Tomcat 出现 “Value must be an existing directory”错误

    今天上午配了一下本机上的Myeclipse的tomcat,因为我本机上有两个版本的myeclipse,一个是用来公司开发的,一个是自己玩的,本机上装了两个版本jdk和两个版本的tomcat.配置自己玩 ...

  10. 百度地图JS调用示例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...