js 复制 指定容器内容

版权声明:原创文章,欢迎任何形式的转载,但请务必注明出处~ https://blog.csdn.net/abs1004/article/details/79184548

其实源生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>

没有更多推荐了,返回首页