js实现复制功能

2021-04-15

字数统计: 598字 | 阅读时长: 2min

现在的剪贴板基本功能有限，有如下限制：

大多数浏览器支持剪贴板，除了Safari。(译注，Safari其实已经支持)
支持因浏览器而异，有些功能不完整或有问题。
事件必须由用户必须发起，如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

使用clipboard.js插件实现复制功能

支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+、Safari 10+、Edge 12+，您还可以通过运行ClipboardJS.isSupported()来检查是否支clipboard.js

示例代码：
复制文本卸载data-clipboard-text属性内

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

<script src="dist/clipboard.min.js"></script>
<script>
  new ClipboardJS('.btn');
</script>

或通过data-clipboard-target指定复制其他元素的文本

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

<script src="dist/clipboard.min.js"></script>
<script>
  new ClipboardJS('.btn');
</script>

您可以定义一个data-clipboard-action属性以指定是否要copy或cut内容。默认值为copy

<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

<script src="dist/clipboard.min.js"></script>
<script>
  new ClipboardJS('.btn');
</script>

事件监听：

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; //动态设置target，则需要返回一个Node。
    },
    text: function(trigger) {
        return trigger.getAttribute('aria-label'); //动态设置text，则将返回一个String。
    },
    container: document.getElementById('modal'), //Bootstrap Modals中使用或与其他任何更改焦点的库一起使用，您需要将focused元素设置为该container值。
});

另外，如果是单页应用程序，则可能需要更精确地管理DOM的生命周期。这是清理创建的事件和对象的方式。

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