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> /* 用途 ...
随机推荐
- （BCB）C++ Builder 6.0在Win7下如何使用帮助Help
因为Win7.Win8.Win8.1不再支持.hlp帮助类型,在BCB中无法打开帮助Help,打开时出错:"不包括功能"或"不受支持的帮助",提示如下: 为何无 ...
- Struts2和SpringMVC的区别
简单谈一下Struts2和SpringMVC的区别,文章有所引用知乎所对应的答案数据,和所查看的其余资料数据,进行一个简单的汇总,后续查看时使用: 知乎解释链接为:https://www.zhihu. ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- 将 Intent 序列化，像 Uri 一样传递 Intent！！！
一.真的需要new一个Intent吗? 在 Android 中,打开一个 Activity ,有多少种方式?不过不管是使用什么方式,最终都没办法逃避创建一个 Intent ,然后startActivi ...
- 数据处理：12个使得效率倍增的pandas技巧
数据处理:12个使得效率倍增的pandas技巧 1. 背景描述 Python正迅速成为数据科学家偏爱的语言,这合情合理.它拥有作为一种编程语言广阔的生态环境以及众多优秀的科学计算库.如果你刚开始学习P ...
- C#对图片进行马赛克处理，可控制模糊程度
using System.Drawing; using System.Drawing.Imaging; using System.Web.Mvc; namespace MVC2017_Sample.C ...
- SQL 表结构操作
数据库知识总结(表结构操作) 1.创建表Scores 1 create table Scores --表名 2 (Id int identity(1,1) primary key,--设置主键,并且行 ...
- 阿凡题UWP的源码公开
高考结束了!这现在就是一款我不会用的app了...所以我以后很少能去维护它了 所以现在决定公开它的源码吧 代码写的相当烂,是自己中早期的一个作品了 里面还有一些自己没填完的坑以及挖到一半的坑.... ...
- java分页算法，传入当前pageIndex，pageSise，dataTotal可计算出页面上显示的页码，和是否启动上一页下一页
public class CalculationPage { private Boolean showStartPagerDot; private Boolean showEndPagerDot; p ...
- ASP.NET MVC 分页
概述:数据比较多的时候,常使用分页.这里使用bootpag.js和PagedList这两个插件实现. 准备JS的引用 1.这个是bootstrap 中pagination的库 2..NET后台ToPa ...