【JavaScript】JS复制剪切神器clipboard.js基本使用
CrazyPanda发表于：2024-11-05 17:25:03浏览：135次
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 数组中删除重复元素？
- 在 JavaScript 中，有多种方法可以从数组中删除重复元素。在本文中，我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此，要实现删除重复元素，我们只需在 filter() 方法中添加条件即可，它会完成剩下的工作。#过滤器.js<script> var arr = ["stev
- 【JavaScript】如何使用 layui 实现自适应
- layui 是一个轻量级的现代前端框架，它提供了丰富的 UI 组件和强大的响应式功能。要使用 layui 实现自适应布局，可以按照以下步骤进行：1. 引用 layui 框架复制以下代码并将其粘贴到你的 HTML 页面中：<script src="path/to/layui.js"></script>2. 定义自适应布局的容器创建用于放置自适应内容的容器，并为其设置 layui-container 类：<div class=&q
- 【JavaScript】5个最受欢迎的图像处理JS库
- 图像处理库 (IML) 用于对图像执行各种处理功能：你可以增加图像的亮度、添加饱和度或滤镜、裁剪和调整大小，以及更多有价值的功能，这些功能将帮助你完成几乎所有事情并将你的网络浏览器变成 Adobe Lightroom！ 我们为每项重要的图像处理任务都提供了库，从简单的低级操作（例如滤镜、亮度和饱和度）到用于裁剪或图像合成的单一用途库。
- 【JavaScript】JS获取时间戳秒值
- 方法一：使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值，然后将其除以1000得到秒值。var timestamp = Math.floor(new Date().getTime() / 1000);方法二：使用JavaScript的Date对象的getTime()方法获取当前的毫秒值，然后使用Math.floor()函数向下取整得到秒值。var timestamp =
- 【JavaScript】字母大小写转换的JS方法
- 1. toUpperCase() 方法：将字符串中的所有字母转换为大写。例如，`"hello world".toUpperCase()` 将返回 `"HELLO WORLD"`。
- 【JavaScript】js获取父级元素
- 在JavaScript中，我们可以使用以下方法来获取元素的父级： 1、 使用parentNode属性：可以通过访问元素的parentNode属性来获取其直接父级元素。例如：var element = document.getElementById('myElement'); var parentElement = element.parentNode;2、 使用parentElement属性：与pa
- 【JavaScript】JS防抖动方法
- 防抖动是指在事件被触发时，为了减少因为快速连续操作导致的大量事件触发，通常会设置一个延时，当事件被触发后，等待一段时间，如果在这段时间内没有新的相同事件被触发，则执行该事件的操作。在JavaScript中，防抖动通常可以通过设置定时器来实现。当事件触发时，如果已经有一个定时器在等待，则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时，事件绑定的处理函数才会执行。function debounce(fn, wait) { l
- 【JavaScript】JS四舍五入保留两位小数(一)
- 1 、tofixed方法toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则。**银行家舍入：所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。**具体规则如下：简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。如下：> (3.61).toFixed(1) //四舍 '3.6&#3
栏目分类全部>