在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用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. iOS逆向环境以及常用命令行(逆向一)

    一.环境介绍 越狱环境:iPhone 5s iOS9.3.1 yueyu:~ root# uname -a Darwin yueyu 15.4.0 Darwin Kernel Version 15.4 ...

  2. 【maven插件】maven-shade-plugin

    概述 该插件提供了将artifact打包到一个本地jar包的能力,包括其依赖关系以及一些参数如 shade -rename重命名依赖关系的包. 目标 shade:shade 绑定到建生命周期中的pac ...

  3. leetCode in Java (一)

    前言    感觉写博客是一个很耗心力的东西T_T,简单的写了似乎没什么用,复杂的三言两语也只能讲个大概,呸呸...怎么能有这些消极思想呢QAQ!那想来想去,先开一个leetcode的坑,虽然已经工作了 ...

  4. BGP协议

    BGP属于自治系统间路由协议.BGP的主要目标是为处于不同AS中的路由器之间进行路由信息通信提供保障.BGP既不是纯粹的矢量距离协议,也不是纯粹的链路状态协议,通常被称为通路向量路由协议.这是因为BG ...

  5. [SDOI2011]工作安排

    Description 你的公司接到了一批订单.订单要求你的公司提供n类产品,产品被编号为1~n,其中第i类产品共需要Ci件.公司共有m名员工,员工被编号为1~m员工能够制造的产品种类有所区别.一件产 ...

  6. activemq的安装与使用

    一.activemq的安装 环境:CentOS 6.JDK8 1. 确保系统已安装了可用的jdk版本2. 从网上下载 Linux 版的 ActiveMQ( apache-activemq-5.11.1 ...

  7. 初识Hibernate之关联映射（一）

    上篇文章我们对持久化对象进行的学习,了解了它的三种不同的状态并通过它完成对数据库的映射操作.但这都是基于单张表的操作,如果两张或者两张以上的表之间存在某种关联,我们又该如何利用持久化对象进行操作呢?本 ...

  8. 550 Create directory operation failed

    往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...

  9. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  10. SqlServer和Oracle中一些常用的sql语句4 局部/全局变量

    --把wh1仓库号中姓名含有"平"字的职工工资在原来的基础上加288 update 职工备份 set 工资=工资+288 where 仓库号='wh1' and 姓名 like ' ...