js 复制指定容器内容

最新推荐文章于 2024-07-26 21:05:01 发布

武当山道士

最新推荐文章于 2024-07-26 21:05:01 发布

阅读量1.7k

点赞数

分类专栏： jQuery javascript 文章标签：网页复制按钮 js实现复制 js复制按钮代码 js复制按钮

本文链接：https://blog.csdn.net/abs1004/article/details/79184548

版权

javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

其实源生js也可以实现，但引入jq库可以方便的兼容复制更多类型dom的内容。
实际使用的时候注意，class 和标签有重复性，所以尽量使用id来保证复制源的唯一性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js复制指定dom内容</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="id_copy"> 我是id为 id_copy 的内容 </div>
    <button onclick="onCopy('#id_copy')">复制指定id内容</button>
    <div class="class_copy"> 我是class为 class_copy 的内容 </div>
    <button onclick="onCopy('.class_copy')">复制指定class内容</button>
    <p>我是第一个p标签的内容</p>
    <p>我是第二个p标签的内容</p>
    <button onclick="onCopy('p')">复制p标签内容，结果取页面第一个p标签的内容</button>
    <!-- textarea用于缓存复制到的内容 -->
    <textarea id="tmp" style="height:0;width:0;opacity: 0;"></textarea> 
</body>
<script>
    //复制按钮
    function onCopy(obj){
      //if(!obj) alert('没标识数据源');
      var tar  = obj || '#copy';
      var content = $(tar).html() || $(tar).val();//input的时候取value
      //textarea缓存要复制的内容
      $('#tmp').val(content);
      $('#tmp').select();
      try{
        document.execCommand("Copy"); //内容复制到剪切板
        alert('复制成功');
      }catch(e){
        alert('浏览器不支持快捷复制，请选中内容后，CTRL+C');
      }
    }
</script>

</html>

武当山道士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 复制指定容器内容

其实源生js也可以实现，但引入jq库可以方便的兼容复制更多类型dom的内容。实际使用的时候注意，class 和标签有重复性，所以尽量使用id来保证复制源的唯一性html lang="en">head> meta charset="UTF-8"> title>js复制指定dom内容title> script type="text/javascript" s
复制链接

扫一扫