代码用原生写的。工作中用的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. Existing lock /var/run/yum.pid: another copy is running as pid 解决办法

    yum只能支持一个例程运行,所以如果有一个例程已经在运行,其他的必须等待该进程退出释放lock.出现这种情况时,可以用以下命令来恢复: rm -f /var/run/yum.pid

  2. Mysql --库和表的操作

    库的增删改查 系统数据库 创建数据库 数据库的相关操作 表的操作 存储引擎介绍(有点多 很啰唆) 表的介绍 表的操作 一.系统数据库 查看系统库: show databases; nformation ...

  3. java中的stream的泛型方法的使用示例

    本文章使用jdk8测试 ,并结合使用lambda测试 测试前准备一些测试数据: class ObjectDemo { private Integer id; private String name; ...

  4. C++实验一

    2-28 #include <iostream> using namespace std; int main() {char x; cout<<"Menu: A(dd ...

  5. 转载：.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法

    .Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法 阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集 ...

  6. centos7中设置nginx的systemctl启动方式

    1.建立服务文件 (1)文件路径 vim /usr/lib/systemd/system/nginx.service (2)服务文件内容 [Unit] Description=nginx - high ...

  7. PHP源码安装后设置别名

    PHP源码安装后测试是否能正常运行 每次在php目录./bin./php调用php很不方便,可以设置别名(方法一) vi ~/.bash_profile     (修改根目录下这个文件) 设置完成后还 ...

  8. SpringBoot 请求参数后端校验

    1.例如: package com.model.user; import com.model.PageEntity;import lombok.Getter;import lombok.Setter; ...

  9. selenium+python-unittest多线程生成报告

    前言 selenium多线程跑用例,这个前面一篇已经解决了,如何生成一个测试报告这个是难点,刚好在github上有个大神分享了BeautifulReport,完美的结合起来,就能生成报告了. 环境必备 ...

  10. 一JavaScript获取当前月份的前12个月，获取最近的12个月二js实现获取当前月份前的12个月份，格式化后放在一个数组里

    一 ,var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMon ...