首页 > 编程语言 > 详细

JavaScript实现点击复制

时间:2020-12-12 09:27:43      阅读:24      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
<meta charset="utf-8"/>  
<title>demo</title>  
</head>  
<body>  
    <div class="demo">
        <p id="p1">这是P1标签的内容</p>
        <br/>
        <p id="p2">这是P2标签的内容</p>
        <br/>
        <input id="input" type="text" value="这里是输入框内容" />
        <br/>
        <br/>
        <textarea id="textarea" rows="3" cols="20">这里是textarea标签</textarea>
        <br/>
        <br/>
        <button onclick="copyToClipboard(‘p1‘)">复制P1</button>
        <button onclick="copyToClipboard(‘p2‘)">复制P2</button>
        <button onclick="copyToClipboard(‘input‘)">复制input</button>
        <button onclick="copyToClipboard(‘textarea‘)">复制textarea</button>
        <br/>
        <br/>
        <textarea cols="50" rows="10" id="text2"></textarea>
      </div>

</body>  
    <script>
    function copyToClipboard(elementId) {
        // 创建元素用于复制
        var aux = document.createElement("input");

        // 获取复制内容
        var content = document.getElementById(elementId).innerHTML || document.getElementById(elementId).value;

        // 设置元素内容
        aux.setAttribute("value", content);

        // 将元素插入页面进行调用
        document.body.appendChild(aux);

        // 复制内容
        aux.select();

        // 将内容复制到剪贴板
        document.execCommand("copy");

        // 删除创建元素
        document.body.removeChild(aux);
        alert("复制成功!");
    }
    </script>
</html>

 

JavaScript实现点击复制

原文:https://www.cnblogs.com/fujie818/p/14123652.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!