js 复制文本到剪贴板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点击复制到剪贴板</title>

</head>

<body>

    <div id="app">

        <p>博客园是最棒的!</p>

        <button id="copy">点击复制</button>

    </div>

    <script>

        var btn = document.getElementById('copy');

        var val = document.getElementsByTagName('p')[0].innerText;

        btn.onclick = function(){

            var tempInput  = document.createElement('input');

            tempInput.value = val;

            document.body.appendChild(tempInput );

            tempInput.select(); // 选择对象

            document.execCommand("Copy"); // 执行浏览器复制命令

            tempInput.className = 'tempInput ';

            tempInput.style.display='none';

            document.body.removeChild(tempInput );//移除

        }

    </script>

</body>

</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. MongDB篇，第四章：数据库知识4

    MongDB 数据库知识4 GridFS 大文件存储 文件的数据库存储 1,在数据库中以   字符串的方式  存储文件在本地的路径: 优点: 节省数据库空间 缺点: 当数据库或者文件位置发生变化时则无 ...

  2. Gym101485： NWERC 2015（队内第6次训练）

    A .Assigning Workstations 题意:给定N个人的工作时间和工作时长,我们可以假设有无数台工作机器,如果一台机器超过M时间未使用就会关闭,那么我们怎么安排机器的使用,使得需要开启机 ...

  3. P2279 消防局的设立（贪心+dp）

    题目链接:传送门 题目大意: 给定一棵树(N个基地N-1条边): 用半径为2的消防局覆盖这N个基地,问最小的消防局数量. (树上距离为k的最小覆盖问题) 思路: 每次贪心地找到不被覆盖的最深的一个节点 ...

  4. No setter found for property 'cronExpression' in class 'org.springframework.scheduling.quartz.CronTriggerBean'

    今天想写个Spring集成Quartz的小Demo,结果报错cronExpression未定义,通过差错,原来是因为Spring 3.0.5与Quartz2.2.2不兼容,Spring3.1以下的只能 ...

  5. hdu4289 Control 最大流最小割

    You, the head of Department of Security, recently received a top-secret information that a group of ...

  6. easyui的select使用

    这是一个小demo,其他相关功能查看easyuiAPI,需要注意的是valueField: 'id', textField: 'name'中id指json的key,name指json的值,id和nam ...

  7. 【传输协议】什么是CA证书

    1.什么是CA证书. 看过一些博客,写的比较形象具体. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 B 公司的所有人都不认识他,他咋办捏?常 ...

  8. 我的TDD实践---CI持续集成

    “我的TDD实践”系列之CI持续集成 写在前面: 我的TDD实践这几篇文章主要是围绕测试驱动开发所展开的,其中涵盖了一小部分测试理论,更多的则是关注工具的使用及环境的搭建,做到简单实践先行,后理论专精 ...

  9. 洛谷P1337 【[JSOI2004]平衡点 / 吊打XXX】（模拟退火）

    洛谷题目传送门 很可惜,充满Mo力的Mo拟退火并不是正解.不过这是一道最适合开始入手Mo拟退火的好题. 对模拟退火还不是很清楚的可以看一下 这道题还真和能量有点关系.达到平衡稳态的时候,物体的总能量应 ...

  10. POI事件模型处理execl导入功能(只支持07版本的execl)

    由于通过new XSSFWorkbook 这种方式导入导致生产环境端口宕机.通过dump文件和javacore文件分析是导入功能导致的.解决办法:自己通过网上写的工具类,不知道是否存在bug. pac ...