JS复制剪切神器clipboard.js
发布于：2025-01-01 00:00:00浏览：132次
查看分享码
提取码：PLJd
1.clipboard.js介绍
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
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>
扫描下方二维码查看分享资源
提取码：PLJd
声明：资源来源于网络，如有侵权请联系删除。
猜你喜欢
- 【MySQL】 复合查询 | 内外连接
- 文章目录1. 复合查询unionunion all单行子查询多行子查询多列子查询in关键字all关键字any关键字多表笛卡尔积自连接在where子句使用子查询在from子句中使用子查询合并查询2. 内连接3. 外连接左外连接右外连接1. 复合查询多表笛卡尔积显示雇员名、雇员工资以及所在部门的名字由于员工 信息属于 emp表 而所在部门名字属于 dept表 数据来自不同的表，所以需要进行多表查询表示从 emp (员工表) 和dept (部门表)
- 【PHP】yaf框架的特点
- Yaf（Yet Another Framework）是一个C语言编写的，针对Web开发的PHP框架。以下是Yaf的一些主要特征： 轻量级设计：Yaf的核心框架大小不超过100KB，运行时内存占用极小。 高性能：Yaf采用C语言编写，性能优秀，远高于纯PHP应用。 易用性：Yaf提供了自动加载类的功能，支持Bootstrap，配置简单。 插件机制：Yaf提供了一种类似于WordPress插件的插件机制，方便功能扩展。 路由功能：Yaf内置了路由功能
- 【Python】PyQt5设置窗口宽高
- 在PyQt中，设置窗口（例如QMainWindow或QWidget）的宽度和高度非常简单。你可以通过修改窗口的size属性或使用setFixedSize()和resize()方法来达到目的。以下是几种常见的方法
- 【PHP】php生僻字处理方法
- 在日常的PHP编程中，我们难免会遇到一些中文生僻字，这些字虽然不常用，但在一些特定的场合下却是必须要用到的。下面我们就来探讨一下PHP处理生僻字的几种方法。一、使用Unicode编码Unicode是一种国际化字符集，它可以表示几乎所有的字符，包括中文生僻字。在PHP中，使用Unicode编码处理生僻字，一般需要使用PHP内置函数chr()和ord()。chr()函数chr()函数可以将一个Unicode码转换为对应的字符，其语法如下：string chr(int $
- 【行业动态】TIOBE4月榜单发布：C/C++深受内存安全影响、PHP辉煌不再！
- 4 月 TIOBE 编程语言榜单已发布，一起来看看本月有什么值得关注的新变化吧！01 C、C++ 深受“内存安全”的影响相较上个月，4 月 TIOBE 榜单的 Top 5 并没有太大变化，依旧是 Python、C、C++、Java、C#。不过，值得注意的是，Top 5 之列只有排名第一的 Python 是继续保持着正向增长的趋势，比上个月上涨了 0.78%，达到 16.41% 的市场份额。一直以来，Python 凭借简洁的语法和清晰的代码结构使得初学者能够快速上手，不仅在 Web 开发
- 【Python】使用Python中的len函数统计文本中的单词数量的示例
- Python中的len函数应用实例：如何利用它统计文本中的单词数量在Python编程中，len函数是一个非常有用的函数，它用于返回一个对象的长度或元素的个数。在本文中，将介绍如何使用len函数来统计文本中的单词数量，并提供具体的代码示例。在开始编写代码之前，需要先了解一下如何定义一个单词。在本文中，我们将使用空格作为单词的分隔符，也就是说，任何两个空格之间的字符串都被认为是一个单词。下面是一个简单的代码示例，展示了如何使用len函数统计文本中的单词数量：def count_words(
- 【UniApp】uniapp路由怎么配置
- 随着移动应用的普及和需求的增加，越来越多的开发者开始使用跨平台开发技术来构建应用程序。UniApp作为一个跨平台的开发框架在这个趋势下逐渐崭露头角，并且受到越来越多开发者的欢迎。在使用UniApp开发应用程序的过程中，路由是一个非常重要的组成部分，它允许你在不同页面之间进行导航。在UniApp中，路由用于控制应用程序的页面跳转和导航。如果你已经熟悉了Vue.js的路由机制，那么在使用UniApp的路由时，你将会感到非常熟悉。UniApp的路由机制可以很好地兼容Vue.js的路由，并且提
- 【PHP】微服务架构综合实战 一文让你了解什么是微服务 使用PHP 搭建微服务框架 最全微服务架构讲解以及演示
- 本文将带你从基础的微服务架构设计、网络协议、注册中心、配置中心、网关层面 渐进式讲解其微服务。目录一、微服务架构设计方案架构演进微服务概念 拆分三个火枪手原则AKF原则二、微服务注册中心和配置中心为什么要使用服务发现与注册为什么要使用配置中心官方下载地址设置环境变量Server配置单机配置集群配置命令解析ThinkPHP接入Consul配置信息中心&nbs
栏目分类全部>