clipboard.js(剪切板)

WEB前端 waitig 562℃ 百度已收录 0评论

https://clipboardjs.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id='foo' value='1234'>
        <button data-clipboard-action='copy' data-clipboard-target='#foo' id='btn'>复制输入框内容</button>

        <button id='btn2' data-clipboard-text='4321'>直接复制固定内容</button>

    </div>

    <script src="js/clipboard.js"></script>
    <script>
        // npm install clipboard --save
        // data-clipboard-action: cut/copy 默认copy
        let clipboard = new Clipboard('#btn');
        clipboard.on('success', (e) => {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);

            e.clearSelection();
        })

        clipboard.on('error', (e) => {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

        let clipboard2 = new Clipboard('#btn2');

        clipboard2.on('success', (e) => {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);

            e.clearSelection();
        })

        clipboard2.on('error', (e) => {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });

    </script>
</body>
</html>

“`


本文由【waitig】发表在等英博客
本文固定链接:clipboard.js(剪切板)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)