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. java之socket

    socket系java中网络编程的内容. 1客户端: package com.wtd.socket; import java.io.BufferedReader; import java.io.IOE ...

  2. 十大谷歌Google搜索技巧分享

    前言:多数人在使用Google搜索的过程是非常低效和无谓的,如果你只是输入几个关键词,然后按搜索按钮,你将是那些无法得到Google全部信息的用户,在这篇文章中,Google搜索专家迈克尔.米勒将向您 ...

  3. ubuntu 14.04 难用的vi

    在插入状态下,按方向键出来的结果竟然是大写的字母ABCD,这是因为在ubuntu中其实没装vi,只装了vim-tiny,在系统上,vi仅仅是vim的一个别名. 这时候需要自己安装完整版的 vim su ...

  4. digitalocean

    sudo apt-get install sshifconfigssh 198.211.102.203sudo adduser uernameubuntu装配SSH,支持开启sftp服务 sftp 1 ...

  5. http://www.html-js.com/article/2328

    React.js编程思想 张小俊128 发布在使用React.js开发web应用2015年8月7日view:33385React 在文章任何区域双击击即可给文章添加[评注]!浮到评注点上可以查看详情. ...

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

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

  7. [开发笔记]-flowplayer视频播放插件

    最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...

  8. 戴文的Linux内核专题：08内核配置（5）

    转自Linux中国 Linux内核拥有许多可以配置的特性,接下来我们还有许多要配置. 下一个可以配置的特性是x86的随机数生成器(x86 architectural random number gen ...

  9. 这个setDefaultCloseOperation写不写的区别是什么？

      2009-03-23 13:40提问者采纳   设置用户在此窗体上发起 "close" 时默认执行的操作.必须指定以下选项之一: DO_NOTHING_ON_CLOSE(在 W ...

  10. Unity开发Android应用程序：调用安卓应用程序功能

    开发环境: Eclipse3.4 + adt12 + jdk6 + AndroidSDK2.2 Unity3.4 + windows7 测试设备: HTC Desire HD 本文要涉及到的几个重点问 ...