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. redis持久化（摘录）

    redis是一个支持持久化的内存数据库,也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化.redis支持两种持久化方式,一种是 Snapshotting(快照)也是默认方式,另一种是Ap ...

  2. 深入理解计算机系统第二版习题解答CSAPP 2.7

    下面的函数将输出什么结果? const char *s = "abcdef"; show_bytes((byte_pointer) s, strlen(s)); 其中字母'a'~' ...

  3. 深入理解计算机系统第二版习题解答CSAPP 2.5

    分别写出十六进制数0x87654321在大端法机器和小端法机器上第1个.前2个.前3个字节. A.小端法:21    大端法:87 B.小端法:21 43      大端法:87 65 C.小端法:2 ...

  4. (转)使用OpenVPN的一些注意事项

    原文地址:http://www.365mini.com/page/16.htm 本文介绍的只是OpenVPN连接或使用过程中的一些注意事项,如果你尚未下载安装OpenVPN,你可以点击查看OpenVP ...

  5. 创建本地RPM源之更新系统旧版软件mysql

    事情起因 系统版本为Centos6.6 ,因为之前同事没有采用最小化选择性安装,所以系统安装好后自带有mysql5.1的三个安装包: [root@test ~]# rpm -qa | grep mys ...

  6. Unity3D 之武器系统冷却功能的实现方式

    先上方法 //如果Fire1按钮被按下(默认为ctrl),每0.5秒实例化一发子弹 public GameObject projectile; public float fireRate = 0.5F ...

  7. MVC小系列（六）【无刷新的验证码】

    做个无刷新的验证码功能: 第一步:首先,在公用项目中建立一个生成图片验证码的类型ValidateCode /// <summary> /// 生成验证码对象 /// </summar ...

  8. MongoDB中的分组

    一.MongoDB中的Count函数.Distinct函数以及分组 准备工作,插入一个班级的文档 > for(var i=0;i<10;i++){ ... db.Classes.inser ...

  9. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  10. Ext.Net学习笔记03：Ext.Net MessageBus用法

    发布和订阅消息 Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了, ...