html5页面实现点击复制功能
在实际工作中，有时候会遇到这样的需求，页面上有一个链接，不需要选中链接内容，只需要点击复制按钮，就可以把链接内容复制到剪切板。这时候可以使用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页面实现点击复制功能的更多相关文章
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方式
近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...
- 在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？
如题,如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面? 参考操作步骤如下: 第一步.用Chrome打开要调试的页面: 第二步.按F12,打开“开发者工具”,点击其右上角的“Dock ...
- juqery 实现 防止当前页面重复点击，以减轻服务器压力
<script> //防止当前页面重复点击,以减轻服务器压力 $(document).ready(function () { var current_url = location.path ...
- 基于html5页面滚动背景图片动画效果
基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="fullpage&q ...
- HTML5 页面制作工具
https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站 81 235 初页 制 ...
- 七、Selenium与phantomJS----------动态页面模拟点击、网站模拟登录
每天一个小实例1(动态页面模拟点击,并爬取你想搜索的职位信息) from selenium import webdriver from bs4 import BeautifulSoup # 调用环境变 ...
- ios访问web页面<div>点击事件不起效果，以及alert()显示url的解决办法
ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...
- 微信HTML5页面设计建议
一个HTML5页面从提出到完成上线的流程:> 1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...
- html5页面与android页面之间通过url传递参数
html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url ?后面,js获取url ?号后面的参数. 方法一: <scrīpt> /* 用途 ...
随机推荐
- CentOS6.x服务器OpenSSH平滑7.3p版本——拒绝服务器漏洞攻击
对于新安装的Linux服务器,默认OpenSSH及OpenSSL都不是最新的,需要进行升级以拒绝服务器漏洞攻击.本次介绍的是升级生产环境下CentOS6.x系列服务器平滑升级OpenSSL及OpenS ...
- jquery模板下载网站
jquery模板下载网站 http://www.jqshare.com/
- LInux ugo权限详解
Linux 中的用户和组是用来控制使用者或者进程可以或者不可以使用哪些资源和硬件,是Linux权限控制最基本的方式. 用户和组可以看一下上一章的部分,先来看一下权限. 一.权限概览 在Linux下,使 ...
- TCHAR
定义 TCHAR :通过define 定义的字符串宏 因为C++支持两种字符串:常规的ANSI编码 (使用""包裹).Unicode编码(使用L" "包裹).因 ...
- 分布式系统中生成全局ID的总结与思考
世间万物,都有自己唯一的标识,比如人,每个人都有自己的指纹(白夜追凶给我科普的,同卵双胞胎DNA一样,但指纹不一样).又如中国人,每个中国人有自己的身份证.对于计算机,很多时候,也需要为每一份数据生成 ...
- 配置和启动Kubernetes服务
安装etcd服务 下载安装包 wget https://github.com/coreos/etcd/releases/download/v3.1.3/etcd-v3.1.3-linux-amd64. ...
- ssi服务器端指令详解(shtml)
你是否曾经或正在为如何能够在最短的时间内完成对一个包含上千个页面的网站的修改而苦恼?那么可以看一下本文的介绍,或许能够对你有所帮助. 什么是SSI? SSI是英文Server Side Include ...
- Scala类型系统(sudden thought)
http://docs.scala-lang.org/tour/lower-type-bounds.html中有一段代码 trait Node[+B] { def prepend(elem: B): ...
- H5新手快速入门 简单布局
布局*{ margin: 0; padding: 0;}.quan{ width: 100%; height: 2000px; background: black url("../ima/b ...
- d3力导向图聚焦
效果描述 双击节点,节点以及节点一度关联的节点保持高亮状态,其余节点变灰,半径变小,文字消失,并且向内收缩. 效果展示 正常状态 聚焦效果 关键代码 节点变化 激活节点保持高亮的样式,其余节点应用no ...