原生js实现点击按钮复制文本内容

最新推荐文章于 2023-06-27 21:16:48 发布

停留的一抹光

最新推荐文章于 2023-06-27 21:16:48 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/weixin_52597446/article/details/119773965

版权

一.原理解析

浏览器本身提供了一个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>

停留的一抹光

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现点击按钮复制文本内容

一.原理解析浏览器本身提供了一个copy命令，利用它可以复制选中的内容：document.execCommand("copy")如果是输入框，我们可以利用select()方法来选中输入框中的内容，然后调用copy命令，将文本复制到剪切板，但是select()方法只对<input>和<textarea>有效，对于其他标签就不太好使了。既然出现了这个问题，那么我们顺着思路想就能想到解决办法的：我们可以在页面中添加一个textarea，然后把他隐藏掉，当我们点击按钮的时候
复制链接

扫一扫