代码用原生写的。工作中用的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. oracle用命令创建表空间、用户，并为用户授权、收回权限。

    oracle中如何删除用户? Oracle中使用DROP USER来删除用户,如果使用DROP USER CASCADE那么用户的对象也同时被删除掉.为了达到删除用户的效果而又不影响对用户下的对象的使 ...

  2. Lua中的迭代器与泛型for

    [前言] 迭代器就是一种可以遍历一种集合中所有元素的机制,在Lua中,通常将迭代器表示为函数.每调用一次函数,就返回集合中的“下一个”元素.每个迭代器都需要在每次成功调用之后保存一些状态,这样才能知道 ...

  3. linux中epoll模型

    epoll是linux内核为处理大批量文件描述符而作了改进的poll,是linux下IO复用select/poll的增强版本. 一.epoll的主要接口是: 1.创建 (1)int epoll_cre ...

  4. 让CPU占用率曲线听你指挥

    使用GetTickCount()和Sleep(): Code#include <stdio.h> #include <unistd.h> #include <time.h ...

  5. cocos2dx-lua 裁剪ClippingNode,圆形头像，其他形状图片

    注意事项:裁剪内容要用Sprite,不能换成ImageView 注意事项: 1.后面测试发现,ImageView也能用,注意换成ImageView时,前缀是ccui. 2.要做圆形头像,用一张圆形图做 ...

  6. （一）Knockout 计算属性

    1 Computed 首先,创建一个view model如下: <body> <p>The fullname is: <span data-bind="text ...

  7. WPF 杂记

    1,跨屏最大化 单屏幕的时候我们可以设置 WindowState 来使应用最大化 当接多个屏幕的时候,就需要下面这个设置: private void FullScreen() { this.Windo ...

  8. Nginx 和 IIS 实现动静分离（转）

    转载地址:https://www.cnblogs.com/paul8339/p/5825201.html 动静分离,说白了,就是将网站静态资源(HTML,JavaScript,CSS,img等文件)与 ...

  9. Codeforces 1109D. Sasha and Interesting Fact from Graph Theory 排列组合,Prufer编码

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF1109D.html 题意 所有边权都是 [1,m] 中的整数的所有 n 个点的树中,点 a 到点 b 的距离 ...

  10. UOJ#276. 【清华集训2016】汽水 二分答案 点分治

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ276.html 题解 首先,读入的时候就将所有的 $w_i$ 减掉 $k$ . 于是我们要求的就是平均值最 ...