JS复制剪切神器clipboard.js
发布于：2025-01-01 00:00:00浏览：152次
查看分享码
提取码：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
声明：资源来源于网络，如有侵权请联系删除。
猜你喜欢
- 【PHP】PHP 字符串编码处理 （附各语言的字符集编码范围）
- PHP中GBK和UTF8编码处理 一、编码范围1. GBK (GB2312/GB18030) x00-xff GBK双字节编码范围 x20-x7f ASCII xa1-xff 中文 x80-xff 中文 2. UTF-8 (Unicode)u4e00-u9fa5 (中文) x3130-x318F (韩文) xAC00-xD7A3 (韩文) u0800-u4e00 (日文) ps: 韩文是大于[u9fa5]的字符 正则例子:preg_replace("/([x80-
- 【Javascript】CSS3和js超酷iPhone样式科学计算器插件
- CalcSS3是一款非常酷的CSS3和js模仿iPhone样式科学计算器插件。该计算器插件没有使用图片，纯CSS制作。该计算器是科学型的，可以处理乘方、开方、指数、对数等复杂的数学运算。
- 【C#】C# Winfrom 右键菜单
- 目录一、概述二、新建 winform 项目三、给图片控件添加右键菜单四、给菜单添加点击事件五、测试结束一、概述ContextMenuStrip 是 Windows 窗体应用程序中的一个控件，它提供了一个弹出菜单，用于在用户右键单击控件或其他界面元素时显示上下文相关的选项。它通常用于在图形用户界面中提供快捷操作和功能。ContextMenuStrip 控件可以通过在 Visual Studio 的设计器中拖放方式添加到窗体上，或者通过编程方式创建和配置。它可以与其他控件（如按钮、文本框等
- 【UniApp】UniApp实现支付宝小程序的开发与上线流程解析
- UniApp是一款基于Vue.js框架的跨平台开发工具，能够快速实现一次编码，多端发布的效果。作为开发者，我们可以利用UniApp来实现支付宝小程序的开发，同时本文将对支付宝小程序开发与上线流程进行详细解析，并提供相应的代码示例供参考。一、UniApp与支付宝小程序开发环境搭建1.确保已安装好Node.js环境，如未安装，可前往Node.js官网下载并安装最新版本。2.在命令行中执行以下命令，安装全局Vue-cli脚手架工具：npm install -g
- 【UniApp】利用uniapp实现图标动画效果
- 利用uniapp实现图标动画效果引言：在现代科技发展的背景下，人们对于跨平台开发需求越来越高。而uniapp作为一种基于Vue.js的前端框架，实现了一套代码多端运行的理念，成为了众多开发者的首选。本文将探讨如何利用uniapp实现图标动画效果，通过具体的代码示例来展示实现的过程。一、准备工作首先，我们需要一个uniapp项目的基础架构。可以在HBuilderX等开发工具中创建一个uniapp项目，这里不再赘述具体步骤。二、下载图标库在实现图标动画效果之前，我们需要准备一些图标资源。可
- 【PHP】PHP8.1新特性大讲解之readonly properties只读属性
- PHP 8.1：只读属性多年来，用 PHP 编写数据传输对象和值对象变得非常容易。以 PHP 5.6 中的 DTO 为例：class BlogData { /** @var string */ private $title; /**
- 【UniApp】如何在uniapp中实现图片上传和预览
- 如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中，图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能，并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中，首先需要在页面中添加一个图片上传组件，如下所示：<template> <view> <image v-for="(item, in
栏目分类全部>