一.原理解析
浏览器本身提供了一个copy命令,利用它可以复制选中的内容:
document.execCommand("copy")
如果是输入框,我们可以利用select()方法来选中输入框中的内容,然后调用copy命令,将文本复制到剪切板,但是select()方法只对<input>和<textarea>有效,对于其他标签就不太好使了。
既然出现了这个问题,那么我们顺着思路想就能想到解决办法的:我们可以在页面中添加一个textarea,然后把他隐藏掉,当我们点击按钮的时候,先把<textarea>的value改成<p>标签或其它标签的i
二.实现方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生 js 实现点击按钮复制文本</title>
<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
</head>
<body>
<div class="wrapper">
<p id="text">需要复制的文本内容</p>
<textarea id="input">幕后黑手</textarea>
<button onclick="copyText()">copy</button>
</div>
</body>
<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerHTML;
var input = document.getElementById("input");
input.value = text;
input.select();//选中文本
document.execCommand("copy");
}
</script>
</html>