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>

这里需要注意的是

  1. 必须依赖JQ

  2. clipboard若地址失效,请百度获取其他地址

  3. new Clipboard('#copy_btn'); 其中copy_btn为点击按钮,或其他

  4. data-clipboard-target="#target" 其中target为被复制的内容

评论

大谋 回复该评论 2020-06-27 09:21:01
又get到一个小工具