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. ASP.NET MVC 在子页中引用头文件

    在很多时候我们把网站公共的js.css文件放在模板页中,这样在具体的每一个页面里面就不需要单独引用. ASP.NET WebForm里面使用.site文件. 而在ASP.NET MVC 中使用了类似下 ...

  2. HBase HMaster Architecture - HBase Master架构

    HBase architecture follows the traditional master slave model where you have a master which takes de ...

  3. 为什么你总是学不好Linux技术？这是我的答案。

    摘要: 我们为什么要学习Linux,最近几年Linux发展迅速,特别服务器领域,带来了很多新技术,云计算,虚拟化,大数据等技术,还有安全方面都有了很大的发展同时也给了Linux运维工作带来了,更多的要 ...

  4. Android统计图表MPAndroidChart.

    Android统计图表MPAndroidChart MPAndroidChart是在Android平台上开源的第三方统计图表库,可以绘制样式复杂.丰富的各种统计图表,如一般常见的折线图.饼状图.柱状图 ...

  5. visual studio 2013连接Oracle 11g并获取数据：(二：实现)

    1.VS中新建一个winform窗体 (1)一个按钮 (2)一个数据表格视图(在里面显示得到的数据表) 2.双击按钮进入代码 (1)添加 using System.Data.OracleClient; ...

  6. Android事件处理--读书笔记

    2013-12-28 17:57:17 1. Android提供了两种方式的事件处理:基于回调和基于监听的事件处理: 1.1 对基于监听的事件处理而言,主要做法是为Android界面组件绑定特定的事件 ...

  7. IT公司100题-21-输入n和m，和等于m

    问题描述: 输入两个整数n 和m,从数列1,2,3,…,n 中随意取几个数, 使其和等于m,将所有可能的组合都打印出来.   分析: 利用递归的思路,对于1,2,3,…,n 中的任意一个数,要么选,要 ...

  8. 去除hadoop启动时的警告

    hadoop启动的时候,会出现以下警告提示: 执行more start-all.sh查看该文件 但/libexec下不存在hadoop-config.sh文件,所以会执行bin/hadoop-conf ...

  9. 机器翻译（noip2010）

    分析:该题是经典的队列题目,直接用队列实现就可以.如果数据范围大一些的话还可hash判重! 这可以说是一道送分的题目,但是还有粗心的学生会在这里失分,主要原因是数组的范围定义的不合适,因为空间足够用, ...

  10. “java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Timestamp”

    最近在项目中使用hibernate查询时,总报错“java.sql.SQLException: Value '0000-00-00' can not be represented as java.sq ...