代码用原生写的。工作中用的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. windows下使用git和github建立远程仓库

    转自(http://www.bubuko.com/infodetail-430228.html) 从昨天开始就在看git的使用,因为在Windows下很多命令行操作都比较坑爹,但是今天再走了无数弯路之 ...

  2. C++设计模式——访问者模式

    访问者模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对访问者模式是这样说的:表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的 ...

  3. 1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

    1.前言 至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程: 2.安装 Flutter 2.1.中文介绍文档:htt ...

  4. adb.exe 已停止工作解决办法

    最近因为工作原因,接触了下Android Studio,在使用真机调试的时候碰到了adb.exe 已经停止工作的错误. 虽然网上有很多和我一样的教程,但是我觉的还是记录一下自己的情况比较好,毕竟每个人 ...

  5. 51nod--1174 区间中最大的数 （RMQ）

    题目: 1174 区间中最大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j ...

  6. IntelliJ IDEA编辑器光标定位错误的问题!

    这几天我的IntelliJ IDEA编辑器总出现一个问题 打开一个项目文件后 点击文件内容无法获得输入光标,不能编辑文件 问题根源(个人): 因为近期本人测试项目时 在编辑器启动后,修改了本地时间 解 ...

  7. 安装 Docker <一>

    一.docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制, ...

  8. promise async

    最简用  promise let res = function () { return new Promise((resolve, reject) => { // 返回一个promise set ...

  9. 期货大赛项目|九,fileinput插件的应用

    引入JS和CSS bundles.Add(new ScriptBundle("~/bundles/fileinputJs").Include( "~/Content/ve ...

  10. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...