clipboard.js 剪切板

Clipboard.js 复制

GitHbu 项目地址

引用

<script src="https://cdn.jsdelivr.net/gh/zenorocha/clipboard.js/dist/clipboard.js"></script>

用法

实例化

可通过 选择器 元素元素列表 实例化

new ClipboardJS('.btn');

复制数据

可以添加一个 data-clipboard-target 属性指向目标元素来复制数据

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

剪切数据

可通过添加 data-clipboard-action 属性来指定是否要 copycut 内容。默认为 copy

<!-- 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>

事件

用于处理在复制或剪切成功或失败后内容的操作,分 successerror 事件

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);
});

高级用法

例如,如果要动态设置目标元素 target,则需要返回一个 Node

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

如果要动态设置 text,则将返回 String

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

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

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

动态创建与销毁

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

用户贡献

添加两个复制函数

function copyUrl() {
    var div = document.getElementById('code');
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(div);
        range.select();
        console.log('fff');
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(div);
        selection.removeAllRanges();
        selection.addRange(range);
        /*if(selection.setBaseAndExtent){
            selection.setBaseAndExtent(text, 0, text, 1);
        }*/
    } else {
        console.warn("none");
    }
    document.execCommand("Copy"); // 执行浏览器复制命令

    alert("已复制好,可贴粘。");
}

$('.copyBtn').click(function(event) {
    // 这个只针对 <input> 和 <textarea>
    var e = document.getElementById("code");
    console.log(e);
    e.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("复制链接成功!");    
});
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...