源生JS实现点击复制功能
程序员文章站
2022-07-01 15:51:17
之前在工作中，有位同事问过我一个问题，JS如何实现点击复制功能。给他解决后现在来总结归纳一下，顺便做个笔记。 PS：此乃本人第一篇博客（跟着同事大佬学习），涉及知识尚浅，如有任何意见和建议请告知于我。下面开始正文：
之前在工作中，有位同事问过我一个问题，js如何实现点击复制功能。给他解决后现在来总结归纳一下，顺便做个笔记。
ps：此乃本人第一篇博客（跟着同事大佬学习），涉及知识尚浅，如有任何意见和建议请告知于我。下面开始正文：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源生js实现点击复制功能</title>
</head>
<body>
<button onclick="clkcopy()">点击复制</button>
<input type="text" id="text" value="123">
<script>
function clkcopy() {
var text = document.getelementbyid("text");
text.select();
document.execcommand('copy');
alert("复制成功！");
}
</script>
</body>
</html>
通过dom元素的select()方法可以选择到<input>和<textarea>中的文字，再调用document.execcommand('copy');实现复制功能。
那么，如果我们想要复制<div>中的内容，可以用上述方法嘛？经测试，使用上述方法点击复制<div>中的内容会报错
那么我们可以使用如下方法来实现此功能：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源生js实现点击复制功能</title>
</head>
<body>
<button onclick="clkcopydiv()">点击复制</button>
<div id="div">123</div>
<script>
function clkcopydiv() {
var text = document.getelementbyid("div");
var selection = window.getselection();
var range = document.createrange();
range.selectnodecontents(text);
selection.removeallranges();
selection.addrange(range);
document.execcommand('copy');
alert("复制成功！");
}
</script>
</body>
</html>