html 點選複製功能

gary-liu發表於2017-05-17
原文網址 : https://blog.csdn.net/revitalizing/article/details/72455626
HTML

因為專案裡要點選複製視訊的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);
            }

        });

    });

參考資料

js實現複製到剪貼簿功能，相容所有瀏覽器

相關文章