无需Flash无需依赖任何JS库实现文本复制与剪切

最新推荐文章于 2024-03-20 14:58:12 发布

我爱默小兜

最新推荐文章于 2024-03-20 14:58:12 发布

阅读量547

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/hsd2012/article/details/50427342

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。

首先加载本地clipboard.js文件。

<script src="clipboard.min.js"></script>

然后就是在body中加上要复制或剪切的文本域内容以及按钮。

<input id="foo" value="http://www.helloweba.com/demo/clipboard/"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>

这里，我们使用了HTML5的data-属性，用来定位复制对象目标，它指向了文本域#foo，说明复制的是#foo中的value内容，aria-label属性定义了复制成功后的信息，用来提示复制结果信息。

还有个属性data-clipboard-action，它定义当前操作是复制还是剪切，默认是复制，当data-clipboard-action="cut"，这时，点击按钮将会剪切文本，跟WORD操作一样。当然，剪切操作仅适用于text和textarea。

我们也可以不需要input和textarea等元素内容作为复制对象，我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上，点击按钮就可以复制到ata-clipboard-text对应的内容。

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>

Javascript

将以下一句代码加入到</body>前的<script>里，保存打开浏览，点击按钮即可复制。

new Clipboard('.btn');

当然我们可以再进一步处理，比如当复制完成后，提示复制成功信息更友好些，只要执行以下代码即可：

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
    var msg = e.trigger.getAttribute('aria-label'); 
    alert(msg); 
 
    e.clearSelection(); 
});

eg：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>异步</title>

<script type="text/javascript" src="clipboard.min.js"></script>

</head>
<body>
<a class="btn" data-clipboard-text="需要复制的文字a" aria-label="复制成功！">复制2</a>

<input id="bar" type="text" value="剪贴剪贴" />
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar" aria-label="已剪切">剪切</button>
<script type="text/javascript">

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
var msg = e.trigger.getAttribute('aria-label');
alert(msg);
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);

e.clearSelection();
});

</script>
</body>
</html>

我爱默小兜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无需Flash无需依赖任何JS库实现文本复制与剪切

我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。首先加载本地clipboard.js文件。 src="clipboard.min.js">
复制链接

扫一扫