WEB前端：利用clipboard.js 进行点击复制文本-漠漠睡的个人博客

日常定制遇到的问题：如何点击复制HTML中的指定文本。clipboard.js是这样说的“拷贝文字不...

日常定制遇到的问题：如何点击复制HTML中的指定文本。

clipboard.js是这样说的“拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁，这就是clipboard.js存在的目的”。

因此，这个JS小插件就生成了（个人理解）

下面开始上源码

!DOCTYPE html>    
<html>    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    <script src="http://www.clipboardjs.cn/clipboardjs_files/clipboard.min.js"></script>  

    <title>复制按钮</title>    
</head>    
<body>    
网址：<span id="target">Https://blog.mijupai.com/</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>      
</body>    
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("复制成功",1500);
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>

这里需要注意的是

必须依赖JQ
clipboard若地址失效，请百度获取其他地址
new Clipboard('#copy_btn'); 其中copy_btn为点击按钮，或其他
data-clipboard-target="#target" 其中target为被复制的内容