js实现各种复制功能
引用：
<script src="https://clipboardjs.com//dist/clipboard.min.js"></script>
示例1：
Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例2：
Cut
提示：点击Cut按钮，把“hello”剪切到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例3：
hello
Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例4：
Copy
提示：点击Copy按钮，把“to be or not to be”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<button class="btn">Copy</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn', {
text: function() {
return 'to be or not to be';
}
}); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例5：
Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<button class="btn">Copy</button>
<div>hello</div> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn', {
target: function() {
return document.querySelector('div');
}
}); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例6：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<button class="btn" data-clipboard-text="">Copy</button>
<button class="btn" data-clipboard-text="">Copy</button>
<button class="btn" data-clipboard-text="">Copy</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例7：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<button data-clipboard-text="">Copy</button>
<button data-clipboard-text="">Copy</button>
<button data-clipboard-text="">Copy</button> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard by passing a list of HTML elements -->
<script>
var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns); clipboard.on('success', function(e) {
console.log(e);
}); clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
示例8：
Copy
提示：点击Copy，把“1”复制到剪贴板。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-node</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- . Define some markup -->
<div id="btn" data-clipboard-text="">
<span>Copy</span>
</div> <!-- . Include library -->
<script src="../dist/clipboard.min.js"></script> <!-- . Instantiate clipboard by passing a HTML element -->
<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);
});
</script>
</body>
</html>
官方Demo:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/
js实现各种复制功能的更多相关文章
- js写的复制功能，只支持IE
如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){ ...
- JS代码实现复制功能
本人没什么基础看了好久百度,不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来,感觉废话一堆效果还没能达到需要复制 的效果. 然而在我看来,js复制代码 无非就那么几句罢了.原生cop ...
- js点击复制功能的实现
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现一键复制功能
var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...
- H5 页面 上使用js实现一键复制功能
2.解决苹果手机浏览器 无法使用的问题 上面的方法在 iphone 手机 safari浏览器失效的问题 其实就是使用输入框先显示然后模拟选择复制在隐藏输入框
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
- js禁止页面复制 禁用页面右键菜单的代码
js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...
- 解决clipboard.js在移动端复制失败的问题
1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
- JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单
1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...
随机推荐
- Python系列——常用第三方库
幕布视图(更加方便.明了):https://mubu.com/doc/AqoVZ8x6m0 参考文献:嵩天老师的Python讲义 模块 定义 计算机在开发过程中,代码越写越多,也就越难以维护,所以为了 ...
- CSS新特性（3D转换，perspective（透视），transfrom-style（子元素是否开启三维环境））
1. 三维坐标系(里面的值不能省略,没有就写 0 ) x 轴:水平向右 注意:x 右边是正值,左边是负值 y轴: 垂直向下 注意:y 下面是正值,上面是负值 z轴:垂直屏幕 注意: ...
- php常见的验证方法
php常见的验证方法 干货文章 ·2018-03-16 23:50:36 <?php /** * @param $id * @return false|int * 检测id */ functio ...
- BiLSTM介绍
https://www.jiqizhixin.com/articles/2018-10-24-13 (机器之心)
- 【CodeVS】 纯OI题
[1203] 判断浮点数是否相等 [青铜 Bronze] 我们一般认为两个浮点数相等,当且当他们之间的误差不超过1e-8. /* 作者:Wanying 题目:p1203 判断浮点数是否相等 */ /* ...
- java.lang.SecurityException: class "javax.servlet.ServletRegistration"'s signer information does not match signer information of other classes in the same package
报错信息: 报错截图: 解决方案: 因为本人是sbt项目,所以添加一下依赖之后解决: 如果是maven项目的话,添加依赖到pom文件中然后在重新build,之后就可以了
- tengine日志切割-配置分钟级别日志自动切割
tengine日志切割-配置分钟级别日志自动切割 安装 以安装最新版本的tengine-2.1.2版本 下载连接 tengine支持许多变量 变量 $conn_requests 当前请求在长连接上的序 ...
- leetcode-168周赛-1298-你能从盒子中获得的最大糖果数
题目描述: 方法一:bfs class Solution: def maxCandies(self, status: List[int], candies: List[int], keys: List ...
- Dart编程实例 - Final 关键字
Dart编程实例 - Final 关键字 void main() { final val1 = 12; print(val1); } 本文转自:http://codingdict.com/articl ...
- 「NOI2016」循环之美 解题报告
「NOI2016」循环之美 对于小数\(\frac{a}{b}\),如果它在\(k\)进制下被统计,需要满足要求并且不重复. 不重复我们确保这个分数是最简分数即\((a,b)=1\) 满足要求需要满足 ...