hi,欢迎访问本站!
当前位置: 首页Web前端正文

js复制到剪切板的方法

墨初 Web前端 442阅读

前端开发工作中,有时候需要有复制文本内容或者剪切文本内容这个需求,下面就说一种使用js集成插件clipboard.js来实现纯js复制或剪切到剪切板的效果。

js实现复制或剪切到剪切板的效果

1、js复制到剪切板的例子

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>73so博客 </title>
    </head>
    <body>
        <div class="box">
        <div class="text">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
        <button type="button" id="btn">点击复制</button>
        </div>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
        <script type="text/javascript">
        var clipboard = new ClipboardJS('#btn', {
            // 通过target指定要复制的节点
            target: function() {
            return document.querySelector('.text');
            } 
            //此时.text中的内容已经在剪贴板中了
        });
        clipboard.on('success', ()=> {
            alert("复制成功!");
        });
        clipboard.on('error', ()=> {
            alert('复制失败!');
        });
        </script>
    </body>
</html>

2、js剪切到剪切板的错误

<!DOCTYPE html>
<html">
<head>
    <meta charset="UTF-8">
    <title>73so博客</title>
</head>
<body>
    <textarea id="bar">剪切剪切剪切剪切剪切</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    点击剪切文字 
    </button>
    <br />
    <input placeholder="你可以在这里粘贴看效果" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
    <script type="text/javascript">
    var btns = document.querySelector('.btn');
    var clipboard = new Clipboard(btns);
    clipboard.on('success', ()=> {
        alert('剪切成功!');
    });
    clipboard.on('error', ()=> {
        console.log('剪切失败!');
    });
    </script>
</body>
</html>

以上就是js中clipboard.js插件中复制到剪切板的的使用方法,大家可以参考。

声明:无特别说明,转载请标明本文来源!
相关推荐