js 复制文本到剪贴板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>点击复制到剪贴板</title>
  7. </head>
  8.  
  9. <body>
  10.     <div id="app">
  11.         <p>博客园是最棒的!</p>
  12.         <button id="copy">点击复制</button>
  13.     </div>
  14.     <script>
  15.         var btn = document.getElementById('copy');
  16.         var val = document.getElementsByTagName('p')[0].innerText;
  17.  
  18.         btn.onclick = function(){
  19.             var tempInput  = document.createElement('input');
  20.             tempInput.value = val;
  21.             document.body.appendChild(tempInput );
  22.             tempInput.select(); // 选择对象
  23.             document.execCommand("Copy"); // 执行浏览器复制命令
  24.             tempInput.className = 'tempInput ';
  25.             tempInput.style.display='none';
  26.             document.body.removeChild(tempInput );//移除
  27.         }
  28.  
  29.     </script>
  30. </body>
  31.  
  32. </html>

js 复制文本到剪贴板的更多相关文章

  1. js复制文本到剪贴板

    execCommand是document的一个方法,返回值是布尔值(true,false) true表示操作被支持,false表示操作不被支持 此方法只针对于input和textarea,对里面的内容 ...

  2. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

  3. ZeroClipboard – 轻松实现复制文本到剪贴板功能

    ZeroClipboard 库提供了一种把文本复制到剪贴板的简单方法.Zero 表示该库是不可见的,用户界面则完全取决于你. 该库完全兼容 Flash Player 10.0.0 或以上版本,这就要求 ...

  4. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  5. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  6. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

  7. js复制文本内容到剪贴板

    记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...

  8. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

  9. 使用原生 JS 复制文本兼容移动端 iOS & android

    注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设 ...

随机推荐

  1. 【算法基础】卡尔曼滤波KF

    kalman filter KCF 尺度变化是跟踪中比较基本和常见的问题,前面介绍的三个算法都没有尺度更新,如果目标缩小,滤波器就会学习到大量背景信息,如果目标扩大,滤波器就跟着目标局部纹理走了,这两 ...

  2. lecture1-Word2vec实战班-七月在线nlp

    nltk的全称是natural language toolkit,是一套基于python的自然语言处理工具集.自带语料库.词性分类库.自带分类分词等功能.强大社区支持.很多简单版wrapper 文本处 ...

  3. javascript json 判断项目 是否存在不存在插入foreach 组合 输出

    var a = []; var i; a.push({ key: "key1", value: 23 }); a.push({ key: "key2", val ...

  4. YIT-CTF—社工类

    下载图片

  5. Python语言规范

    Lint 对你的代码运行pylint 定义: pylint是一个在Python源代码中查找bug的工具. 对于C和C++这样的不那么动态的(译者注: 原文是less dynamic)语言, 这些bug ...

  6. 【BZOJ3144】【HNOI2013】切糕

    总算做了一道2011以后的省选题了……原题: 图片题面好评! P,Q,R≤40,0≤D≤R,给出的所有的不和谐值不超过1000. 文本样例好评! 恩这个是听妹主席讲过后会写的,首先把每个点拆成链,那么 ...

  7. LA5009 Error Curves

    题意 PDF 分析 因为这些函数都可以看成下凸的,所以总函数也是下凸的(可用反证法证明). 三分答案即可,时间复杂度\(O(100)\) 代码 #include<bits/stdc++.h> ...

  8. mysql优化查询

    使用索引查询 MariaDB [test]> explain select * from te where id=22; #在没有增加索引情况下,rows为7,即查询行数 +------+--- ...

  9. day 56 jQuery学习

    1.补充:each 描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组.数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1.其他对象通过其属性名 ...

  10. Go语言实战 (William,Kennedy 等著)

    第1章 关于Go语言的介绍 (已看) 1.1 用Go解决现代编程难题 1.1.1 开发速度 1.1.2 并发 1. goroutine 2. 通道 1.1.3 Go语言的类型系统 1. 类型简单 2. ...