当前位置：首页 > 知识库 > 正文

js点击复制文本（js实现复制功能）

知识库
知识库
2022-01-06 10:01:32
282

介绍

clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。

安装

通过npm安装（或者直接下载js文件引入）

npm install clipboard –save

2.引入js

//官网提供了下载地址，也可以使用免费的cdn

使用

示例

<!DOCTYPE html><html class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title></title> <meta name="description" content=" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="input-group" style="width: 600px;margin:200px"> <input type="text" class="form-control" id="foo" value="https://github.com/zenorocha/clipboard.js.git" placeholder="Amount" /> <div class="btn input-group-addon" data-clipboard-target="#foo">复制</div> </div> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script> new ClipboardJS(".btn"); </script> </body></html>

如图书最简单的例子，单机复制按钮即可自动复制文本框的内容

换成下面就会变成剪切，主要是以下属性

data-clipboard-action=”cut”

<div class="input-group" style="width: 600px;margin:200px"> <input type="text" class="form-control" id="foo" value="https://github.com/zenorocha/clipboard.js.git" placeholder="Amount" /> <div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div> </div> <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <script> new ClipboardJS(".btn"); </script>

剪切操作仅适用于<input>或<textarea>元素

或者这样，直接复制 data-clipboard-text属性的内容

事件监听，可以打开控制台自行尝试

var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection();});clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});

高级用法

动态绑定new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling; }});动态赋值new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); }});要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值new ClipboardJS('.btn', { container: document.getElementById('modal')});更好的管理单页面的DOM生命周期var clipboard = new ClipboardJS('.btn');clipboard.destroy();