【JavaScript】JS复制剪切神器clipboard.js基本使用
CrazyPanda发表于：2024-11-05 17:25:03浏览：144次
1.clipboard.js介绍
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
资源分享：https://www.51bj.top/home/assets/7.html
2.常见的使用方法
通过target的function复制内容指定节点的值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>clipboard使用</title>
</head>
<script src="js/clipboard.min.js"></script>
<body>
<button class="btn">copy</button>
<div id="copyCont">目标复制内容</div>
<script >
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.getElementById('copyCont');
}
});
/*复制成功*/
clipboard.on('success', function(e) {
console.log(e);
});
/*复制出现失败的情况下*/
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
通过text的function复制内容，在text方法中放回复印的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>clipboard使用</title>
</head>
<script src="js/clipboard.min.js"></script>
<body>
<button class="btn">copy</button>
<div id="copyCont">目标复制内容</div>
<script >
var clipboard = new ClipboardJS('.btn', {
text:function(){
return "复制的内容哈哈哈"
}
});
/*复制成功*/
clipboard.on('success', function(e) {
console.log(e);
});
/*复制出现失败的情况下*/
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
通过id指定节点对象，这里的返回值的内容是data-clipboard-text的内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>clipboard使用</title>
</head>
<script src="js/clipboard.min.js"></script>
<body>
<button id="btn" data-clipboard-text="1">copy</button>
<script >
var btn=document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
</script>
通过class获取所有button按钮，并做为参数传送给Clipboard。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>clipboard使用</title>
</head>
<script src="js/clipboard.min.js"></script>
<body>
<button class="btn" data-clipboard-text="copy1">Copy</button>
<button class="btn" data-clipboard-text="copy2">Copy</button>
<button class="btn" data-clipboard-text="copy3">Copy</button>
<script >
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
猜你喜欢
- 【JavaScript】javascript中doucument对象的属性和方法有哪些
- doucument对象的属性和方法有：body、cookie、domain、lastmodified、referrer、title、close()、open()、write()、getelementbyid()、normalize()等等。本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
- 【JavaScript】JS中referer的使用
- HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索
- 【JavaScript】js复制内容到剪切板
- 复制内容到剪切板分两种情况，一种是从页面已有的可选元素中选中内容进行复制，一种是将Javascript代码中的字符串直接复制到剪切板。一 、复制页面元素选中内容html<input type="textarea" id="txt" /> <button onclick="copy()">复制</button>jsfunction copy()&nbs
- 【Javascript】图片转base64的三种js方法
- 在前端，将图片转换为Base64编码是一种常见的做法，尤其是在不需要服务器端处理图片的情况下。Base64编码允许你将图片直接嵌入到HTML或CSS中，或者在JavaScript中作为字符串传输。以下...
- 【JavaScript】如何从 JavaScript 数组中删除重复元素？
- 在 JavaScript 中，有多种方法可以从数组中删除重复元素。在本文中，我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此，要实现删除重复元素，我们只需在 filter() 方法中添加条件即可，它会完成剩下的工作。#过滤器.js<script> var arr = ["stev
- 【Javascript】CSS3和js超酷iPhone样式科学计算器插件
- CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片，纯CSS制作。该计算器是科学型的，可以处理乘方、开方、指数、对数等复杂的数学运算。
- 【JavaScript】5个最受欢迎的图像处理JS库
- 图像处理库 (IML) 用于对图像执行各种处理功能：你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小，以及更多有价值的功能，这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adobe Lightroom！ 我们为每项重要的图像处理任务都提供了库，从简单的低级操作（例如滤镜、亮度和饱和度）到用于裁剪或图像合成的单一用途库。
- 【JavaScript】js获取父级元素
- 在JavaScript中，我们可以使用以下方法来获取元素的父级： 1、 使用parentNode属性：可以通过访问元素的parentNode属性来获取其直接父级元素。例如：var element = document.getElementById('myElement'); var parentElement = element.parentNode;2、 使用parentElement属性：与pa
栏目分类全部>