Clipboard.js : 移動端瀏覽器實現網頁內容複製

最近在項目中遇到這樣一個需求：

 

點擊按鈕，將指定的URL複製到剪貼板，而後用戶能夠粘貼到瀏覽器(Safari爲主)自行打開。

 

方案一：zeroClipboard.js

 

 

github地址：https://github.com/zeroclipboard/zeroclipboard

 

複製原理：zeroClipboard利用透明的 flash 覆蓋在複製按鈕上，點擊 flash，將複製內容傳入到 flash 中，再經過 flash 把傳入的內容寫到剪貼板上

 

首先想到這個插件的緣由是，以前在PC端的項目中使用過，兼容性很好，得心應手，因此，先用它作了個demo

HTML

<input type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard">
<button id="copyUrlBtn">複製連接</button>

 

JAVASCRIPT

	(function(){
            var btn = document.getElementById('copyUrlBtn'),
            text = document.getElementById('iUrl'),
            zc = new ZeroClipboard(btn);
	    zc.on('beforecopy', function(e){
	        zc.setText(text.value);
	    });
	    btn.onclick = function(){
	    	alert('已複製');
	    }
	})();

 

使用zeroClipboard.js須要注意如下兩點：

1# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目錄結構下， ZeroClipboard.swf無需調用，只需在頁面中引用ZeroClipboard.min.js 便可;

2# 測試複製功能需在服務器環境，能夠是簡單的本地服務器，如：http://localhost:8000/xx

 

測試結果：

在PC端瀏覽器上測試，功能正常；可是在ios上,不管是QQ瀏覽器，仍是Safari瀏覽器都沒法實現複製功能。

可能因爲Flash技術正被各大瀏覽器廠商冷落，因此，截止到目前ZeroClipboard.js最新版，也沒法實如今移動端瀏覽器進行文本複製。

 

方案二：Clipboard.js

 

 

 官網地址：https://clipboardjs.com/

 

 兼容性：

 雖然要求Safari版本在10以上，可是做者作了很好的優雅降級：

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

 

 也就是說，Safari版本是10以上的，能夠直接成功複製；若是是版本小於10，能夠經過以下代碼提示用戶手動複製：

clipboard.on('error', function(e) {
    alert('請選擇「拷貝」進行復制!')
});

 

Safari版本在10如下的效果：

在 alert('請選擇「拷貝」進行復制!') 以後，待複製的文字會自動選中，而後彈出系統自己的tooltip 

效果以下：

 

 DEMO：

 

HTML：

   <!-- Target -->
    <input id="foo"  value="http://www.968309.com/mobile.php">

    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">複製</button>

 

JAVASCRIPT：

    //init
    var clipboard = new Clipboard('.btn');
    //優雅降級:safari 版本號>=10,提示覆製成功;不然提示需在文字選中後，手動選擇「拷貝」進行復制
    clipboard.on('success', function(e) {
        alert('複製成功!')
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('請選擇「拷貝」進行復制!')
    });

　　

 

 2017/08/25 後續補充：

 

近期不少朋友經過留言和郵件詢問我，爲何在安卓手機上沒法使用Clipboard.js來實現複製？

其實按照本文demo說明，是徹底能夠的；

只是不少朋友沒有沒有把待複製內容放在input輸入框裏，才致使在安卓手機上沒法複製。

 

錯誤寫法：

<p id="foo">這裏是須要複製的文本</p>

　　

正確寫法：

<input type="text" id="foo" value="這裏是須要複製的文本"/>

 

 

 2018/05/14  更新：個人小程序【陽光投票】已上線，歡迎你們體驗建議！