欢迎光临一流素材网,免积分免费素材下载!
秒应用
帝云CMS 帝云CMS
当前位置:首页 > JS代码 > 精品插件

clipboard.js-将文本复制到剪贴板的插件

所属栏目:精品插件更新时间:2021-12-31原作者:不详来源:clipboard发布者:deepdfhy浏览:0
基本信息
  • 使用文档
  • 效果演示

clipboard.js是一个不依赖 Flash,将文本复制到剪贴板的插件,仅仅 2kb。

为什么有clipboard.js

将文本复制到剪贴板应该不难。它不应该需要数十个步骤来配置或数百个KB来加载。但最重要的是,它不应该依赖于Flash或任何臃肿的框架。

这就是剪贴板存在.js的原因。

开始使用

下载clipboard.js页面引用

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

或者直接引用cdn的

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

现在,您需要通过传递DOM选择器, HTML元素或HTML元素列表来实例化它。

new ClipboardJS('.btn');


实例:

<button class="btn" data-clipboard-text="这里是要被复制的内容">点击复制</button>


事件:

如果我们需要一些反馈,比如点击复制时弹出提醒

<button class="btn-copy" data-clipboard-text="这里是要被复制的内容">点击复制</button>
<script>
var clipboard = new ClipboardJS('.btn-copy');
clipboard.on('success', function(e) {
  alert('已经复制到剪切版');
});
clipboard.on('error', function(e) {
  console.log('复制失败');
});
 </script>


高级用法:

如果您不想修改HTML,可以使用一个非常方便的命令性API。您需要做的就是声明一个函数,执行您的操作,然后返回一个值。

例如,如果要动态设置 ,则需要返回 Node。target

new ClipboardJS('.btn', {
    target: function(trigger) {        return trigger.nextElementSibling;
    }
});

如果要动态设置 ,将返回一个字符串。text

new ClipboardJS('.btn', {
    text: function(trigger) {        return trigger.getAttribute('aria-label');
    }
});

要在 Bootstrap Modals 中使用,或与任何其他更改焦点的库一起使用,您需要将焦点元素设置为值。container

new ClipboardJS('.btn', {
    container: document.getElementById('modal')
});

此外,如果您使用的是单页应用程序,则可能需要更精确地管理 DOM 的生命周期。下面介绍了如何清理我们创建的事件和对象。

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();


浏览器支持

此库依赖于Select和execCommand API。所有浏览器都支持第一个,而以下浏览器支持第二个浏览器。



暂无
标签: 复制
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
华为云折上折
最受欢迎的

1swiper6-开源、免费、强大的触摸滑动插件

2aos.js-网页滚动加载动画的jQueryCSS3动画库

4exzoom-一款jquery商城商品放大镜插件

5bootstrap4多级导航/侧栏导航插件-sina-nav

6clipboard.js-将文本复制到剪贴板的插件

企业网站开发
最新更新的

1clipboard.js-将文本复制到剪贴板的插件

2aos.js-网页滚动加载动画的jQueryCSS3动画库

3bootstrap4多级导航/侧栏导航插件-sina-nav

4swiper6-开源、免费、强大的触摸滑动插件

5exzoom-一款jquery商城商品放大镜插件