html 点击复制功能

最新推荐文章于 2024-08-11 12:03:04 发布

gary-liu

最新推荐文章于 2024-08-11 12:03:04 发布

阅读量1.9w

点赞数 3

分类专栏： Front-end 文章标签： html flash 点击复制 jquery

本文链接：https://blog.csdn.net/revitalizing/article/details/72455626

版权

Front-end 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

因为项目里要点击复制视频的URL，在这里记录下，方便以后复用。

在网上查了下资料，主要有 js+flash 的实现和 html5 的实现，前者使用 flash 对浏览器的兼容性较好，后者支持已经支持 HTML5 的浏览器。

最近又发现一个不用 flash 和框架的插件 clipboard.js（github上的star挺多的，有空再看下） clipboard.js官网

HTML5 实现方式

示例是复制 span 标签中 value 属性中的值。

css


/* 复制成功后提示样式*/
.copy-tips {
    position: fixed;
    z-index: 999;
    bottom: 50%;
    left: 50%;
    margin: 0 0 -20px -80px;
    background-color: rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);
    padding: 6px;
}

.copy-tips-wrap {
    padding: 10px 20px;
    text-align: center;
    border: 1px solid #F4D9A6;
    background-color: #FFFDEE;
    font-size: 14px;
}

html

jsp页面中的内容


<span value="${item.videoUrl}" class="copyVideo" style="color:#10b7ff;cursor:pointer;" onclick="copyVideoUrl(event)">复制URL</span>

js


function copyVideoUrl(event){

    var value = $(event.target).closest("span").attr('value');
    var success;
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(value).select();
    try{
       success = document.execCommand("copy");
    }catch (e){
        succeed = false;
    }
    if(success){
        var $copySuccess = $("<div class='copy-tips'><div class='copy-tips-wrap'>复制成功</div></div>");
        $("body").find(".copy-tips").remove().end().append($copySuccess);
        $(".copy-tips").fadeOut(3000);
    }

    $temp.remove();
}

点击按钮复制示例见
Click button copy to clipboard using jQuery

js + flash 实现方式

有独立的 js 库 Zero Clipboard 可以实现复制功能，这里使用封装后的 jQuery ZeroClipboard，jQuery-zclip 插件需要 Flash 的支持，代码要放到服务器上运行才有效果，本地是不起作用的。jquery-zclip插件

HTML、CSS和上面一样，这里只写js。注意：代码中要引入 jquery.zclip.js ，jquery.min.js, js代码中还要指明引入 ZeroClipboard.swf 文件的位置。

js

$(document).ready(function() {

        $(".copyVideo").zclip({
            path: "${context}/js/ZeroClipboard.swf",
            copy: function () {
                return $(this).attr("value");
            },
            beforeCopy: function () {/* 按住鼠标时的操作 */
                $(this).css("color", "orange");
            },
            afterCopy: function () {/* 复制成功后的操作 */
                var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>复制成功</div></div>");
                $("body").find(".copy-tips").remove().end().append($copysuc);
                $(".copy-tips").fadeOut(2000);
            }

        });

    });