zoukankan      html  css  js  c++  java
  • JQuery实现复制到剪贴板功能

    在网页中实现复制到剪贴板功能,有两种方法,
    第1种方法:使用JavaScript自带的方法,但是这种方法只能在IE下使用。
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("已复制好,可贴粘。");
    或者
    window.clipboardData.setData("Text","要复制的内容"); 
    alert("已复制好,可贴粘。");
    
    第2种方法:使用Jquery.ZeroClipboard组件,这种方法通过内嵌flash来实现的,可以兼容当前流行的各种浏览器。
    我们今天主要讲解第2种方法的实现(该方法在本地测试好像不行,必须发布到服务器上才可以)
    首先引用JQuery和Jquery.ZeroClipboard,其中包括一个swf文件。
    下面是网页的源代码:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>JQuery实现复制到剪贴板功能</title>
        <script type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="JavaScript/ZeroClipboard.js"></script>
        <script type="text/javascript">
            $(function ()
            {
                //实现复制功能
                $("#Copy").zclip({
                    path: 'JavaScript/ZeroClipboard.swf',
                    copy: $("#txtInput").val() + "
    " + "[转载自:IT交流吧(http://www.itc8.com)]",
                    afterCopy: function ()
                    {
                        alert("复制成功,您可以粘贴发送给QQ上的好友或QQ群了!");
                    }
                });
            });
        </script>
    </head>
    
    <body>
        <input type="text" id="txtInput" />
        <input type="button" id="Copy" value="复制" />
    </body>
    </html>

     源码下载

  • 相关阅读:
    xcode 快捷键大全、XCode常用快捷键图文介绍
    在ASP.NET Core 2.0 web项目中使用EntityFrameworkCore
    AspNetCore2身份验证
    @addTagHelper的使用
    Asp.net Mvc身份验证
    webAPi OData的使用
    Chrome及Chrome内核浏览器改变开发者工具字体大小
    银行卡号校验
    django静态文件
    django 简单路由配置
  • 原文地址:https://www.cnblogs.com/jordan2009/p/4772948.html
Copyright © 2011-2022 走看看