【javascript】點擊複製內容的實現

時間 2019-12-14

原文原文鏈接

　　各類站點有不少相似的代碼，不過都是拿來即用，連個解釋也沒有。大概看了一下，如今主要使用的有兩種辦法：javascript

　　　　1.documen.execCommand("Copy")或者window.cliperboardhtml

　　　　2.利用flash來訪問剪貼板java

　　可是上面兩種的兼容性很差。第一種僅適用於ie內核的瀏覽器，火狐、Chrome、Safari都不行。第二種的話徹底依賴因而否安裝了Flash，上面這些瀏覽器只有Chrome內置Flash，並且在Flash9和10之間調用方法有差別。chrome

　　因此降級一下，對於IE用戶提供直接點擊複製，對於Chrome等用戶，只能提示其使用組合件CTRL+C了。瀏覽器

　　代碼以下：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <button onclick="copyToCliper('複製的實際內容')">按鈕</button></div>
        <script type="text/javascript"> 
            function copyToCliper(msg){       
                var Sys = {}; 
                var ua = navigator.userAgent.toLowerCase(); 
                var s; 
                (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 
                (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : 
                (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : 
                (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : 
                (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; 
                if( Sys.ie ){
                    var _text = document.createElement("textarea");
                    _text.style.width = "1px";
                    _text.style.height = "1px";
                    _text.style.background = "transparent";
                    _text.style.border = "none";
                    _text.style.resize = "none";
                    _text.style.filter = "alpha(opacity=0)";
                    _text.textContent = msg;
                    document.body.appendChild(_text);
                    _text.select(); //選擇對象 
                    document.execCommand("Copy"); //執行瀏覽器複製命令
                    alert("已複製。");
                }
                else{
                    window.prompt("您的瀏覽器不支持直接複製\n請使用Ctrl+C來複制文本框內容，確認完成後點擊關閉。",msg);
                }
            } 
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。