日常定制遇到的问题:如何点击复制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为被复制的内容