在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用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. Shell 变量详解教程之位置变量与预定义变量。

    Shell 变量分为3部分,分别是用户自定义变量.位置变量和预定义变量. 一.   自定义变量 那么,什么是变量呢?简单的说,就是让某一个特定字符串代表不固定的内容,用户定义的变量是最普通的Shell ...

  2. 洗礼灵魂，修炼python（8）--高效的字典

    python几大核心之--字典(dict) 1.什么是字典 学生时代都用过字典吧?用这个字的读音,偏旁就能用字典查到其相关信息,词性,意思,组词,造句,还有在什么场合下用这个字等等的. 在python ...

  3. 51nod 1126 求递推序列的第N项 思路：递推模拟，求循环节。详细注释

    题目: 看起来比较难,范围10^9 O(n)都过不了,但是仅仅是看起来.(虽然我WA了7次 TLE了3次,被自己蠢哭) 我们观察到 0 <= f[i] <= 6 就简单了,就像小学初中学的 ...

  4. Linux Bash Shell字符串截取

    #!/bin/bash#定义变量赋值时等号两边不能有空格,否则会报命令不存在  # 运行shell脚本两种方式 # 1.作为解释参数 /bin/sh test.sh ;  2.作为可执行文件 chmo ...

  5. 【模板】AC自动机（加强版）

    题目描述 有个由小写字母组成的模式串以及一个文本串.每个模式串可能会在文本串中出现多次.你需要找出哪些模式串在文本串中出现的次数最多. 输入输出格式 输入格式: 输入含多组数据. 每组数据的第一行为一 ...

  6. .Neter玩转Linux系列之五：crontab使用详解和Linux的进程管理以及网络状态监控

    一.crontab使用详解 概述:任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类: (1)系统工作:有些重要的工作必须周而 复始地执行. (2)个别用户工作:个别用户可能希望执 行 ...

  7. linux上搭建ftp

    linux上搭建ftp 重要 解决如何搭建ftp         解决用户指定访问其根目录         解决访问ftp超时连接         解决ftp主动连接.被动连接的问题 1.安装ftp ...

  8. 安装CentOS7精简版后的配置工作

    CentOS7完整版有7.7G,太大了下载起来比较费劲,还是下载了精简版,但是精简版安装以后很多命令都没有,还要动手配yum源,按需安装 国内的yum源比较好的就是163的了,配置方法: 1,进入yu ...

  9. C# XML序列化

    /// <summary> /// XML序列化为指定对象 /// Author:taiyonghai /// Time:2016-08-22 /// </summary> / ...

  10. Mysq基础

    本文是之前看博客时候的记录,忘记是哪位仁兄的了,在这只做一次转载: 常见误区 count(1)和count(primary_key) 优于 count(*) 很多人为了统计记录条数,就使用 count ...