使用document.ExecCommand("copy")命令，官方文档，点我。

例如：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function copyLink(){

    var e = document.getElementById("copy");

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

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

    alert("内容复制成功！");

}

</script>

</head>

<body>

<textarea id="copy">待复制的内容</textarea>

<input type="button" onclick="copyLink()" value="点击复制"></input>

</body>

</html>

在复制中，使用最多的就是clipboard.min.js插件了，点我查看下载地址，点我查看官方文档

<body>

    <p>通过text参数来进行复制操作</p>

    <button class="btn">复制</button>

</body>

<script src="js/version/clipboard.min.js"></script>

<script>

    var clipboard = new Clipboard('.btn', {

        text: function() {

            return '这里是text参数返回的内容 - Hello yubai8';

        }

    });

    clipboard.on('success', function(e) {

        alert("文字已复制到剪贴板中");

        console.log(e);

    });

    clipboard.on('error', function(e) {

        alert("异常错误： " + JSON.stringify(e.message));

        console.log(e);

    });

</script>

也可以像下面这样：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    </head>

    <body>

        <div>欢迎光临 yubai9</div>

        <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

        <script src="js/version/clipboard.min.js"></script>

        <script>

            var clipboard = new Clipboard('.btn');

            clipboard.on('success', function(e) {

                alert("文字已复制到剪贴板中");

                console.log(e);

            });

            clipboard.on('error', function(e) {

                alert("异常错误： " + JSON.stringify(e));

                console.log(e);

            });

        </script>

    </body>

</html>

clipboard.min.js插件并不是兼容所有的浏览器。

如果不需要显示定义textarea后再复制，可以这样做。先创建一个textarea元素，然后进行复制，最后再把这个元素删除掉。下面显示了使用的过程：

        var text="需要复制的内容";

        var element = $("<textarea>" + text + "</textarea>");

        $("body").append(element);

        element[0].select();

        document.execCommand("Copy");

        element.remove();

原文链接：

JS实现复制粘贴功能

js实现点击复制功能

【javascript】js实现复制、粘贴的更多相关文章

  1. js 实现复制粘贴

    js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...

  2. js 实现复制粘贴文本过滤（保留文字和图片）

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  3. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  4. Javascript禁止网页复制粘贴效果，或者复制时自动添加来源信息

    一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...

  5. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  6. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...

  7. 在html页面通过js实现复制粘贴功能

    前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...

  8. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  9. js 实现复制粘贴时注意方法中需要两次点击实现的bug

    方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...

  10. js 禁止复制粘贴

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...

随机推荐

  1. （转）AssetBundle系列——共享资源打包/依赖资源打包

    有人在之前的博客中问我有关共享资源打包的代码,其实这一块很简单,就两个函数: BuildPipeline.PushAssetDependencies():依赖资源压栈: BuildPipeline.P ...

  2. 利用OSG实现模拟飞机尾迹-粒子系统

    利用OSG实现模拟飞机尾迹-粒子系统 粒子系统简介:         粒子系统是用于不规则模糊物体建模及图像生成的一种方法.         粒子系统是一种过程模型,即利用各种计算过程生成模型各个体素 ...

  3. Android LazyList 从网络获取图片并缓存

    原演示地址 本文内容 环境 演示 LazyList 从网络获取图片并缓存 参考资料 本文是 Github 上的一个演示,通过网络获取歌手专辑的缩略图,并显示在 ListView 控件中.该演示具备将缩 ...

  4. iOS界面篇 - bounds和frame的相同和区别

    相同点: 他们都是CGRect类型,且拥有属性origin(x, y),  size(weight, height) 不同点: bounds是你画的视图的边界,和父视图没有半毛钱关系 frames则一 ...

  5. 学习 Linux，302（混合环境）: 概念

    http://www.ibm.com/developerworks/cn/linux/l-lpic3-310-1/ 概述 在本文中,学习以下概念: Server Message Block (SMB) ...

  6. HTML5开发之获取设备的地理坐标

    近期一段时间開始学一下html5,发现里面有好多的知识还是蛮新颖的.所以整理了一下自己练习过的demo给大家分享下,以下的代码是通过js接口获取当前的地理坐标. <!doctype html&g ...

  7. 算法笔记_228:信用卡号校验(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么担心,因为并不是一个随便的信用卡号码都是合法的,它必须通过Luhn算法来验证 ...

  8. java动态代理_aop

    (一)代理概述 1.问题:要为已存在的多个具有相同接口的目标类的各个方法增加一些系统功能,例如,异常处理.日志.计算方法的运行时间.事务管理等等,如何去做? 解答:编写一个与目标类具有相同接口的代理类 ...

  9. python 获取当前执行的命令 处于什么文件内

    https://stackoverflow.com/questions/3718657/how-to-properly-determine-current-script-directory-in-py ...

  10. Python实践摘录

    1:中文编码问题 Python语言默认不识别UTF-8的编码字符串,所以当文件中有中文并且是以UTF-8编码时,需要在python文件头部加一行注释,指明识别utf-8编码. # coding=utf ...