复制文本事件(clipboard.min.js)

Posted 2020-12-31 james_liang

在项目中有这么一个需求，点击按钮复制一段文本，就像下图中的点击微信我们，弹出一个弹窗，点击好的跳转微信端添加好友。

法一：（clipboard.min.js）

 

需要使用到clipboard.min.js，下载链接：https://github.com/Superheroo/copy-text/tree/master

 代码如下：

html部分：

<div id="target">微信号</div>

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">

<a class="copy" href="weixin://">复制按钮</a>

</button>

js部分：

$(document).ready(function () {

var targetText = $("#target").text();

var clipboard = new ClipboardJS(\'#copy_btn\');

clipboard.on(\'success\', function (e) {

e.clearSelection();

});

});

 红色是点击处，黄色是点击时要复制的内容，橙色处不可少

法二：（原生JS）

在页面中添加一个 <textarea>，然后把它隐藏掉

点击按钮的时候，先把 <textarea> 的 value 改为 <p> 的 innerText，然后复制 <textarea> 中的内容

html：

<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
<p id="text">我把你当备胎你却想着复制我？</p>
<textarea id="input">这是幕后黑手</textarea>
<button onclick="copyText()">copy</button>
</div>

js：

<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
</script>