做网站需要什么框架长沙网站制作主要公司
一、Clipboard.js简介
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。
官网地址：Clipboard.js
浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+
二、Clipboard.js安装
2.1、NPM安装
你可以在 npm 上获取它：
npm install clipboard --save
2.2、ZIP安装
如果您不喜欢包管理，只需下载ZIP文件即可：Clipboard.js的ZIP文件。
三、使用Clipboard.js
3.1、在页面引入clipboard.js
<script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>
现在，你需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化它。
3.2、从元素属性复制文本
事实是，您甚至不需要其他元素来复制其内容。您可以只在 trigger 元素中包含一个属性：data-clipboard-text。
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a>
3.2.1、执行JS事件
<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>
3.2.2、执行JS事件效果
3.3、从其他元素剪切文本
此外，您还可以定义一个属性来指定是否要 或 content。data-clipboard-actioncopycut；如果省略此属性，则默认使用：copy
3.2.1、HTML代码
<textarea name="" id="bar"></textarea>
<a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a>
3.3.2、执行JS事件
<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>
3.3.3、执行JS事件效果
3.4、以下是完整的HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clipboard.js实现复制文本到剪贴板功能</title><script src="js/node_modules/jquery/dist/jquery.js" type="text/javascript"></script><script src="js/node_modules/clipboard/dist/clipboard.js" type="text/javascript"></script>
</head><body><!-- 从其他元素剪切文本 --><textarea name="" id="bar"></textarea><a href="javascript:;" class="btn" id="copyBtn" data-clipboard-action="cut" data-clipboard-target="#bar">复制</a><!-- 从元素属性复制文本 --><a href="javascript:;" class="btn" id="copyBtn" data-clipboard-text="复制测试内容">复制</a><textarea name="" id="bar"></textarea></body></html>
<script type="text/javascript">let isCompatible = ClipboardJS.isSupported();//--------这句为：是否兼容if (isCompatible) {let clipboard = new ClipboardJS('#copyBtn');clipboard.on('success', function (e) {console.log(e.text);$('#bar').val(e.text);console.log("文本已经复制到剪贴板！");});clipboard.on('error', function (e) {let cpoy_text = e.text;if (!cpoy_text) {alert("需要复制或剪切的内容为空！");}});}
</script>