代码用原生写的。工作中用的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. 关于TabLayout与ViewPager在Fragment中嵌套Fragment使用或配合使用的思考

    注意: 因为继承的是Fragment,所以getSupportFragmentManager()与getFragmentManager()方法无法使用,这里需要用到getChildFragmentMa ...

  2. 【原创】Java基础之Freemarker（1）模板加载及清空机制

    一 freemarker加载模版机制 freemarker中的配置项template_update_delay表明模版的缓存时间,单位是s,超过缓存时间则从磁盘加载最新的模版,具体细节如下: 1)fr ...

  3. ASP.NET 多环境下配置文件web.config的灵活配置

    调试,发布Asp.net程序的时候,开发环境和发布环境的Web.Config往往不同,比如connectionstring等.如果常常有调试,发布的需求,就需要常常修改web.config文件,这往往 ...

  4. JavaScript我学之八善变的this---函数执行上下文

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 函数执行上下文 当函数运行时,通过this,函数可以获取它运行所需的外界环境的相关信息(比如某变量的值,另一个对象的引用等). this引用 ...

  5. PHP开发API接口签名及验证

    <?php // 设置一个密钥(secret),只有发送方,和接收方知道 /*----发送方和接收方- start ----*/ $secret = "28c8edde3d61a041 ...

  6. Angular路由——子路由

    一.子路由语法: 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 n ...

  7. day18常用模块之re模块

    简单认识正则表达式 正则测试工具:http://tool.chinaz.com/regex/ 元字符,单个字符匹配 . 匹配除换行符以外的任意字符 \w 匹配字母数字下划线(word) \s 匹配任意 ...

  8. Python3-Cookbook总结 - 第一章：数据结构和算法

    第一章:数据结构和算法 Python 提供了大量的内置数据结构,包括列表,集合以及字典.大多数情况下使用这些数据结构是很简单的. 但是,我们也会经常碰到到诸如查询,排序和过滤等等这些普遍存在的问题. ...

  9. JavaEE 之 SpringBoot

    1.Springboot a.定义:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程 b.约定目录结构:(Maven的资源文件目 ...

  10. WebLogic使用总结(一)——WebLogic安装

    一.下载WebLogic 到Oracle官网http://www.oracle.com/ 下载WebLogic(根据自己的情况选择),本文档下载的是Generic WebLogic Server an ...