clipboard.js 剪切板

2019-12-31 - JavaScript 插件

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("复制链接成功!");    
});

- END -

16
0

qrious 二维码生成插件

qrious 二维码生成插件

qriousGitHub地址网站地址描述qrious是一款基于HTML5Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码 ...

headroom.js 导航栏特效

headroom.js 导航栏特效

GitHub项目地址官方演示地址引用<scriptsrc="https://cdn.jsdelivr.net/gh/wickynilliams/headroom.js@0.11.0/src/Headroom.js">&l ...

ObjTree.js

ObjTree.js

...

typinyin.js 拼音输入文本

typinyin.js 拼音输入文本

GitHub项目地址演示地址Typinyin.js是受Typed.js启发而开发的一款js插件,无需jQuery即可使用。输入中文并输入相对应的 ...

jscex/wind.js

jscex/wind.js

jscex/wind.js异步通信GitHub项目地址0.6.5版本<scriptsrc="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/jscex/jscexc.min.js&quo ...

Three.js

Three.js

...

particles.js 粒子库

particles.js 粒子库

效果图GitHub项目地址演示地址引用<scriptsrc="/particles.js"></script>HTML<divid="particles-js"></ ...

QRcode.js 二维码制作

QRcode.js 二维码制作

GitHub地址:https://github.com/davidshimjs/qrcodejs引用:<scriptsrc="/qrcode.js"></script>基本用法:<divid="q ...

waves.js 点击水波纹特效

waves.js 点击水波纹特效

引用文件<linkrel="stylesheet"type="text/css"href="waves.css"/><scripttype="text/javascript"src=&q ...

CKEditor 富文本编辑器

CKEditor 富文本编辑器

GitHub项目地址文档引用//CKEditor5<scriptsrc="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>< ...