方法一：使用ZeroClipboard.js插件

<html>

  <head>

    <meta charset="UTF-8">

  </head>

  <body>

  <input type="text">

    <script type="text/javascript" src="dist/jquery-1.11.3.min.js"></script>

    <script type="text/javascript" src="dist/ZeroClipboard.min.js"></script>

    <div contenteditable="true" style="width:200px;height: 400px;border:1px solid red"></div>

    <div id="content" >

        <p>99u999999</p>

        <a><img src="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_small.jpg" alt="" data-url="http://app1.xesimg.com/roommsg/ab78423e59a018f0adaa212a3998a15a_big.jpg" class="img-rounded img-thumbnail"></a>

    </div>

    <div>ddd</div>

    <input id="copy" type="button" data-clipboard-text="复制文本" value="复制固定文本内容">

    <input id="copyHtml" type="button" data-clipboard-target="content" value="复制一个id中的所有html内容">

    <script type="text/javascript">

        new ZeroClipboard( document.getElementById("copy") );

        new ZeroClipboard( document.getElementById("copyHtml") );

    </script>

  </body>

</html>

方法二：使用document.execCommand('copy');

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>JS复制功能</title>

    <style>

     *{

       margin:0;

       padding:0;

     }

     input{

       border:1px solid #ccc;

       padding: 5px;

       width: 200px;

     }

     button{

       height:32px;

     }

    </style>

  </head>

  <body>

     <div style="width: 400px;height: 200px;border: 1px solid red" contenteditable="true"></div>

     <input type="text" placeholder="里面输入文字" value="复制文本域中的内容">

     <div id="copyContent">复制非文本域的元素内容<p><a href="###">链接</a></p></div>

     <button id="copyInput" type="button">点击复制</button>

     <button id="noInput" type="button">点击复制非文本框文本域的元素</button>

  </body>

</html>

<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>

 <script>

  $(document).ready(function(){

    //复制文本域中的内容

    $('#copyInput').click(function(){

        $('input').select();

        document.execCommand('copy');

        //alert('复制文本域中的内容')

    })

    //复制非文本域的元素内容

    $('#noInput').click(function(){

        //狐火浏览器下会把外层的id元素也复制进去，容易造成错误，所以需要区分copy内容的id的范围 ,但是目前没有找到区分的方法，即使在copyContent外 加一层居然也会把加的那层也复制进去

        SelectText('copyContent');

        document.execCommand('copy');

        //alert('复制非文本域的元素内容')

    })

  })

  function SelectText(element) {

      var browserName=navigator.userAgent.toLowerCase();

        var text = document.getElementById(element);

        if (/msie/i.test(browserName) && !/opera/.test(browserName)) {

            var range = document.body.createTextRange();

            range.moveToElementText(text);

            range.select();

        } else {

            var selection = window.getSelection();

            var range = document.createRange();

            range.selectNodeContents(text);

            selection.removeAllRanges();

            selection.addRange(range);

            //苹果浏览器下，现已经不支持html的内容

            // var selection = window.getSelection();

            // selection.setBaseAndExtent(text, 0, text, 1);

        }

    }

 </script>

　　

js实现复制功能，将需要复制的内容放入剪切板上的更多相关文章

  1. js 将内容复制到剪切板上

    clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("#effects") ...

  2. 读取txt内容放入set中

    package pingbi; /** * 将txt文本读入导入到set中 * 问题: * 第一个地方有会多一个 ?--解决问题很简单,但不知道问题的原因 */ import java.io.Buff ...

  3. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...

  4. js获取用户当前页面复制的内容并修改

    如果只是单纯的获取页面上复制的内容可以使用window.getSelection()来获取选中的内容,在执行复制操作就可以了,但是如果想修改复制的内容可以先获取要复制的内容修改之后再用document ...

  5. Clipboard---将文本复制到剪切板上

    第一步:链接 Clipboard 的js文件 < script src = “ https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.m ...

  6. vue 复制文本到剪切板上

    1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...

  7. ZeroClipboard.js兼容各种浏览器复制到剪切板上

    http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...

  8. js实现复制input的value到剪切板

    <button class="button-code button-copy">复制链接</button><script> $(".b ...

  9. 把js生成的内容放入网页原有的div上

    <script> ; ; //5列 ); ; var htmlstr="<table style='position:absolute;top:9%;left:10%; b ...

随机推荐

  1. memcached内存管理机制[未整理]

    memcached默认采用的是Slab Allocator的机制分配管理内存的,在此之前,内存的分配是通过对所有的记录简单地进行malloc和free来进行的,但这种方式容易造成很多内存碎片,加重操作 ...

  2. php bccomp的替换函数

    if (!function_exists('bccomp')) { /** * 支持正数和负数的比较 * ++ -- +- * @param $numOne * @param $numTwo * @p ...

  3. 【SqlServer】SqlServer索引的创建、查看、删除

    索引加快检索表中数据的方法,它对数据表中一个或者多个列的值进行结构排序,是数据库中一个非常有用的对象. 索引的创建 #1使用企业管理器创建 启动企业管理器--选择数据库------选在要创建索引的表- ...

  4. 【Oracle】Oracle的内外连接

    目录结构: contents structure [+] Oracle的内外连接 内连接 等值连接 非等值连接 自连接 外连接 外连接的特点 如何实现外连接 SQL99的内外连接 SQL99的内连接 ...

  5. Kafka生产环境中的错误

    最近在处理日志收集任务时,发现前端服务器用flume进行收集,逐步把所有的服务器都增加上.增加的差不多时.Kafka报了如下类似错误: 709 [main] WARN kafka.producer.a ...

  6. appium简明教程（11）——使用resource id定位(仅支持安卓4.3以上系统)

    上一节乙醇带大家了解了appium的定位策略.实际上appium的控件定位方式是完全遵守webdriver的mobile扩展协议的. 这一节将分享一下如何使用resource id来定位android ...

  7. win7重命名文件时 提示 “指定的设备名无效”的解决办法

    同事从mac上传一个文件夹到win7上,但是少了一张图片con.jpg.查了半天发现将备份文件改名为con.jpg时提示 “指定的设备名无效”. 谷歌了下,发现了问题所在.坑爹的win7. 从不同的系 ...

  8. activiti 6 查询api

    1 activiti 查询多字段排序 每个字段都要有 sortBy -> desc/asc [sortBy -> desc/asc] [sortBy -> desc/asc] 2 使 ...

  9. 从ext4将mysql数据目录移动至lustre出现(InnoDB: Unable to lock ./ibdata1, error: 38.)

    因为数据目录过大,因此我把目录从本地移到了共享存储中.在修改了/etc/my.cnf和/etc/init.d/mysqld之后发现数据库可以运行,但启动速度很慢 原因是原文件系统是ext4,而目标文件 ...

  10. 找不到dubbo:annotaion错误

    dubbo 2.8.4 出现找不到dubbo:annotation的错误,其实这个不会影响程序正确的运行,但是看到有红叉心里肯定非常不爽: 解决办法是,将dubbo-2.8.4.jar包,后缀改成.z ...