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>

　　

js 实现复制到剪切板 复制按钮兼容各大浏览器的更多相关文章

  1. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

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

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

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

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

  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. jquery实现点击复制到剪切板

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

  7. ZeroClipboard插件，复制到剪切板

    发现一个复制到剪切板的插件:ZeroClipboard插件.挺好用,用法如下: 头部引用: <script type="text/javascript" src=" ...

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

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

  9. 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件

    [源码下载] 重新想象 Windows 8 Store Apps (40) - 剪切板: 复制/粘贴文本, html, 图片, 文件 作者:webabcd 介绍重新想象 Windows 8 Store ...

随机推荐

  1. ACTIVITI 表结构数据分析

    ACTIVITI ACT_RU_EXECUTION 表     这个表是工作流程的核心表,流程的驱动都和合格表有密切的关系. 一般来讲一个流程实例都有一条主线.如果流程为直线流程,那么流程实例在这个表 ...

  2. FZU 1911 Construct a Matrix

    题目链接:Construct a Matrix 题意:构造一个矩阵,要求矩阵的每行每列的和都不相同.矩阵的边长是前n项斐波那契的和. 思路:由sn = 2*(fn-1)+(fn-2)-1,只要知道第n ...

  3. json_encode时中文编码转正常状态

    function json_encode_cn($data) { $data = json_encode($data); return preg_replace("/\\\u([0-9a-f ...

  4. SqlServer2008快照隔离模式的业务应用

    场景: 有200个检测点,每个检测点每天采集5个数据,对表的读写都是随机的(即有可能同时读写),总共有5年的数据. 存储方案A: 日期 点号 类型 值 20120101 001 A 1.0 20120 ...

  5. sql删除多余重复的数据只保留一条

    delete from people where   peopleName in (select peopleName    from people group by peopleName      ...

  6. 重写 button 的创建方法

    重写 button 的创建方法 //sxc时时改变 // self.videoM.progress = progress; // if ([self.videoM.downloadStr isEqua ...

  7. Linux配置防火墙 开启80端口

    vi /etc/sysconfig/iptables -A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT(允许80端口通过防火 ...

  8. [开发笔记]-js判断用户的浏览设备是移动设备还是PC

    最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...

  9. 企业需要k2来解放孤岛危机

    当我谈孤岛危机时,我谈些什么?你以为我要说的是一款风靡的游戏?那恐怕要让你失望了,今天要谈的是“企业管理体系孤岛”,但更多人甚至都没意识到这是危机. 下面的场景,也许你会觉得似曾相识. 场景一 某制鞋 ...

  10. Web体系=资源+URI+表示

    概述 Web有三个核心概念:资源(Resource).URI(UniformResource Identifer,统一资源标识符).表示(Representation).一个资源由一个URI进行标识. ...