zeroclipboard官网：https://github.com/zeroclipboard/ZeroClipboard

下载压缩包，得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件。

首先页面中载入ZeroClipboard.js

ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf

的地址。

demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>ZeroClipboard demo实例</title>

        <script src="../js/ZeroClipboard.js"></script>

        <script src="../js/jquery.min.js"></script>

    <script>

                $(function(){

                        var clip = new ZeroClipboard( document.getElementById("copy-button"), {

                          //<span style="color: #1d1d1d; font-family: tahoma, arial, 宋体; letter-spacing: 1px; line-height: 29px; white-space: normal; background-color: #ffffff;">指定ZeroClipboard.swf的路径</span>

                          moviePath: "../js/ZeroClipboard.swf"

                        } );

                       

                        clip.on( 'load', function(client) {

                          // alert( "movie is loaded" );

                        } );

                       

                        clip.on( 'complete', function(client, args) {

                          //this.style.display = 'none'; // "this" is the element that was clicked

                          alert("复制成功，复制的内容为: " + args.text );

                        } );

                       

                        clip.on( 'mouseover', function(client) {

                          // alert("mouse over");

                        } );

                       

                        clip.on( 'mouseout', function(client) {

                          // alert("mouse out");

                        } );

                       

                        clip.on( 'mousedown', function(client) {

                                //在这里为剪贴板赋值

                                clip.setText($("#_input").val());

                        } );

                       

                        clip.on( 'mouseup', function(client) {

                          // alert("mouse up");

                        } );

                });

    </script>

</head>

<body>

 <button id="copy-button" title="复制到剪贴板">复制到剪贴板</button>

 <input type="text" id="_input">

</body>

</html>

$(document).delegate('.copy_btn',"click",function(){

	var vfont='耶！复制成功喽！',

	cons = $(this).prev().val();

	    if(document.all){

	            window.clipboardData.setData("Text",cons);

	            alert(vfont);

	    }else{

	        alert("该浏览器不支持，请手动复制！");

	    }

});

　　

[JavaScript] js 复制到剪切板的更多相关文章

  1. ClipboardJS 实现JS复制到剪切板

    根据官方文档的说法这个支持IE9+以及大部分主流浏览器,地址:https://clipboardjs.com/ 下面写个简单的例子:HTML:注意,这里最好是button,并非所有的元素都支持该JS ...

  2. jquery.zclip.js复制到剪切板

    参考http://www.cnblogs.com/PeunZhang/p/3324727.html 需要引用jquery.zclip $("#id").zclip({ path: ...

  3. js 复制到剪切板

    function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $(' ...

  4. 复制到剪切板js代码(转)

    <script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...

  5. web复制到剪切板js

    web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...

  6. clipboard.js 实现动态获取内容并复制到剪切板

    使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...

  7. js 最简单的实现复制到剪切板 xl_copy

    使用 npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{     ...

  8. jquery实现点击复制到剪切板

    1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...

  9. ZeroClipboard插件——复制到剪切板

    ZeroClipboard是一个轻量级的jQuery“复制到剪贴板”插件采用了时下流行的零剪贴板库.官网:http://www.steamdev.com/zclip 参数及默认值path(必选)  Z ...

随机推荐

  1. Java基础知识强化之IO流笔记56：IO流练习之 登录注册IO版

    1.  登录注册IO版的Java项目框架,如下: 2. 具体代码实现: (1)User.java(cn.itcast.game): package cn.itcast.pojo; /** * 这是用户 ...

  2. Spring安全资料整理列表

    Spring 被爆漏洞,允许远程执行代码http://automationqa.com/forum.php?mod=viewthread&tid=2827&fromuid=21 Spr ...

  3. javascript进击（七）Ajax

    AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...

  4. Android 自学之帧布局 FrameLayout

    帧布局(FrameLayout)直接继承了ViewGroup组件: 帧布局容器为每一个加入其中的组件都创建了一个空白的区域,这个区域我们称之为一帧,所有每个组件都占据一帧,这些都会根据gravity属 ...

  5. 闲话：你今天OO了吗？

    如果你的分析习惯是在调研技术的时候最先弄清楚有多少业务流程,先画出业务流程图,然后顺藤摸瓜,找出业务流程中每一步骤的参与部门或岗位,弄清楚在这一步参与者所做的事情和填写表单的结果,并关心用户是如何把这 ...

  6. PHP中刷新输出缓冲

    http://www.cnblogs.com/mutuan/archive/2012/03/18/2404957.html PHP中刷新输出缓冲buffer是一个内存地址空间,Linux系统默认大小一 ...

  7. linux安装rzsz

    rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具优点:比ftp命令方便,而且服务器不用打开FTP服务. sz:将选定的文件发送(send)到本地机器rz:运行该命令 ...

  8. 一些简单的帮助类（2）-- JavaSctipt Array Linq

    在日程工作中经常会遇到这样的问题 一个JS数组 我们要找出其中 一些符合要求的类容 又或者对数组里的类容求和求平均数之类的一般的做法是循环里面的类容做判断添加到一个新的集合里 var array = ...

  9. 【Java咬文嚼字】关键字(二):八个基本数据类型

    本次谈谈java中的基本数据类型.java中8个基本数据类型说多不多说少也不少,相对简单的记忆方式:整数型(byte,short,int,long).浮点型(float,double).逻辑型(boo ...

  10. c# 与 winform 界面开发

    在 windows 下使用 vs2010 开发,未深入研究. c# 与 .net 开发,一堆又一堆的新名词,头晕目眩,比如 CLR / apartments / STA / MTA / COM 吐槽无 ...