复制粘贴插件——clipboard.js的使用

2019-10-11

将文本复制到剪贴板应该不难。配置它不需要几十个步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。

安装

npm安装

npm install clipboard --save

或者,如果您不喜欢包管理,只需下载一个ZIP文件

设置

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn');  //通过类名.btn的元素实例化

在内部,我们需要获取与选择器匹配的所有元素,并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项,则此操作会消耗大量内存。 因此,我们使用事件委托,它将多个事件侦听器替换为一个侦听器。

使用方法

我们正在经历一个声明性的复兴,这就是为什么我们决定利用HTML5的数据属性来获得更好的可用性

复制

相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target属性,该属性值用来匹配另一个元素选择器。

<!-- Target -->
<!-- <input
  id="bar"
  value="无敌大帅哥"
> -->
<p id="bar">无敌大帅哥</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>

剪切

另外,也可以定义 data-clipboard-action属性为 copy/cut来,明确操作是 复制 / 剪切如果忽略了这个属性,便默认 复制

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如上例,剪切 cut的操作只能在 <input><textarea>标签中起作用,在其他标签中会出现事件正常调用,但是操作是失败的,粘贴板是没有改变的

通过属性复制文本

我们甚至不必需要其他承载文本的元素,仅通过 在触发元素中 添加 data-clipboard-text属性 来完成复制

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

注意:

  • data-clipboard-text“级别最高”,在 data-clipboard-target等属性存在时,复制内容及相关参数以 data-clipboard-text为准

事件

回调函数: success / error

事件名参数
successevent.action copy/cut操作
event.text copy/cut操作文本内容
event.triger 触发操作的DOM元素
errorevent.action copy/cut操作
event.triger 触发操作的DOM元素
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);
});

工具提示

每个应用程序有不同的设计需求,这就是为什么clipboard.js不包括任何CSS或内置的工具提示解决方案。 您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。如果你正在寻找相似的外观和感觉,你可能想看看。

高级用法

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

例如 如果想动态的设置一个目标元素target,则需要返回一个节点,即 动态设置点击复制的目标元素

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

如果想动态设置内容文本text,则返回一个字符串String

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

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

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

并且,如果在单页应用中使用时,要更精确地管理DOM的生命周期,可以使用以下方法清除创建的事件对象

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

浏览器支持

这个库同时依赖于SelectionexecCommandapi。所有浏览器都支持第一个,而以下浏览器支持第二个。

  • Chrome 42 +
  • Edge12 +
  • Firefox 41 +
  • IE 9 +
  • Opera 29 +
  • Safari 10 +

好消息是,如果需要支持旧的浏览器,clipboard.js可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时,因为文本已经被选中,所以在调用错误事件时,请按Ctrl+C进行复制。 你也可以通过运行ClipboardJS.isSupported()来检查是否支持clipboard.js,这样你就可以从UI中隐藏复制/剪切按钮

彩蛋

ChromeFirefox浏览器扩展:在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代码块中 添加一个 "copy to clipboard" 的按钮

原文链接:segmentfault.com

上一篇:针对angular分页插件tm.pagination二次触发问题三种解决方案
下一篇:如何将一个普通对象变成一个可以迭代的对象
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部