代码用原生写的。工作中用的angular，所以如果有用angular的话，请把js代码copyToClipboard函数中的document.getElementById(elementId).innerHTML || document.getElementById(elementId).value替换成相应$scope变量，其他地方对于会angular的肯定也会改，不一一赘述了。
对于兼容性，测了一下，Chrome、firefox、IE7及IE7+都支持，唯一需要注意的是chrome 41版本并未出现效果，也无报错。

<style>

p {

    font-size: 20px;

}

input {

    width: 300px;

    height: 30px;

}

</style>

<body>

    <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/>

    <input type="text" placeholder="请将复制的内容右键粘贴进行查看" />

</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);

    }

</script>

文章来自    http://www.qdfuns.com/notes/22887/b8f13315a49ea57c498459edc42d4ef3.html

js点击复制剪贴板的更多相关文章

  1. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  2. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  3. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  4. JS点击复制

    <!DOCTYPE html><html><head> <script type="text/javascript"> functi ...

  5. JS 点击复制Copy插件--Zero Clipboard

    写博客就是一周工作中遇到哪些问题,一个优点就是能够进行一个总结,另外一个优点就是下次遇到相同的问题即使那你记不住,也能够翻看你的博客攻克了.相同也能够帮到别人遇到与你一样问题的人.或者别人有比你更好的 ...

  6. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  7. JS 点击复制

    一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入 ...

  8. js 点击复制文字

    复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...

  9. js 点击复制代码 window.clipboardData.setData

    var v = document.getElementById("forcopy").value; window.clipboardData.setData('text',v); ...

随机推荐

  1. Linux日志每日备份脚本

    2018-5-28 10:59:07 星期一 原理是: 1. 每天0点0分crontab执行备份脚本 2. 先将当前日志文件copy一份作为备份, 备份文件名的后缀为前一天 3. 用当前日志的最后50 ...

  2. C# 最牛逼的Utility工具类

    完整代码: using System; using System.Collections.Specialized; using System.IO; using System.Net; using S ...

  3. web页面实现文件下载的几种方法

    今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web页面中嵌入 url超级链接,标准的 ...

  4. java 并发 concurrent Executor

    Excutor类 Executor 执行提交的对象Runnable任务. ExecutorService 一个Executor ,提供方法来管理终端和方法,可以产生Future为跟踪一个或多个异步任务 ...

  5. 简单几步让网站支持https，windows iis下https配置方式

    1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...

  6. zabbix4.0构建实录

    [Nginx] #wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo [root@centos ...

  7. Windows10 永久激活查询/激活时间查询/激活查询命令/激活码查询

    1.使用 Windows + R组合快捷键打开运行命令框 运行: slmgr.vbs -dlv       命令 可以查询到Win10的激活信息,包括:激活ID.安装ID.激活截止日期等信息.看不懂的 ...

  8. C++ vector的用法（整理）

    vector 是向量类型,它可以容纳许多类型的数据,如若干个整数,所以称其为容器.vector 是C++ STL的一个重要成员,使用它时需要包含头文件: #include<vector>; ...

  9. Andy's First Dictionary---set，stringstream

    https://cn.vjudge.net/contest/177260#problem/C stringstream :https://blog.csdn.net/xw20084898/articl ...

  10. DDoS攻击与防御（4）

    在发生DDoS攻击的情况下,可以通过一些缓解技术来减少攻击对自身业务和服务的影响,从而在一定程度上保障业务正常运行.缓解DDoS攻击的主要方法是对网络流量先进行稀释再进行清洗. 1.攻击流量的稀释 1 ...