jquery点击按钮复制内容

2024年5月29日 127次阅读 来源: nqxcwl

做移动端的项目遇到一个需求要点击按钮复制dom里的内容，看了很多资料显示必须textarea或者input里的内容才能简单复制，还有就是用插件的了，最终都因为遇到各种问题放弃，最终选择了最简单的点击复制文本框(textarea)里的内容，把要复制的内容写在textarea里，用定位负值把文本框隐藏掉，然后就实现复制的功能了，贴一下简单的代码，共有需要的同学参考，欢迎大神指正。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>点击按钮复制dom里的内容</title>
    </head>
    <body>
        
        <div>
            <div>我是要复制的内容1</div>
            <textarea cols="20" rows="10" id="copy1" style="position: fixed;top: -2000px;">我是要复制的内容1</textarea>
            <input type="button" onclick="copyContent('copy1')" value="复制1" /><br /><br />
            <div>我是要复制的内容2</div>
            <textarea cols="20" rows="10" id="copy2" style="position: fixed;top: -2000px;">我是要复制的内容2</textarea>
            <input type="button" onclick="copyContent('copy2')" value="复制2" /><br /><br />
            <div>我是要复制的内容3</div>
            <textarea cols="20" rows="10" id="copy3" style="position: fixed;top: -2000px;">我是要复制的内容3</textarea>
            <input type="button" onclick="copyContent('copy3')" value="复制3" /><br /><br />
        </div>
        <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function copyContent(id){ var copyCon = document.getElementById(id); copyCon.select(); // 选择对象
 document.execCommand("Copy"); // 执行浏览器复制命令
 alert("已复制好，可贴粘。"); } </script>
    </body>
</html>

 

    原文作者：nqxcwl
    原文地址: https://blog.csdn.net/nqxcwl/article/details/102877978
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞