人氣 5179°c

複製文章內容(連結)按鈕-IE﹑Firefox﹑Chrome﹑Safari﹑Opera

由於現時!大部份的”複製“按鈕只支持IE瀏覽器,使其他的瀏覽器無法複製文章內容,

例如現時流行的Firefox﹑Chrome﹑Safari﹑Opera瀏覽器,如果想修正此問題,

我們可以利用zeroclipboard實現複製連結﹑內容﹑链接等支持多瀏覽器….

方法一:需要ZeroClipboard插件。

首先請到 https://github.com/zeroclipboard/zeroclipboard 下載zeroclipboard文件包!

解壓縮後其他的文件及檔案不需要,只需拿取這2份檔案︰”ZeroClipboard.js” & “ZeroClipboard.swf” 即可!

並將這兩份檔案文件使用FTP軟體,上傳到網站的”根目錄”或”程序目錄”中….

複製代碼範例︰
<html>
<head>
<style type="text/css">
#d_clip_button {
text-align:center;
border:1px solid black;
background-color:#ccc;
margin:10px; padding:10px;
}
#d_clip_button.hover { background-color:#eee; }
#d_clip_button.active { background-color:#aaa; }
</style>
</head>
<body>
<script type="text/javascript" src="ZeroClipboard.js"></script>
Copy to Clipboard: <input type="text" id="clip_text" size="40" value="Copy me!"/><br/><br/>
<div id="d_clip_button">Copy To Clipboard</div>
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( '' ); // will be set later on mouseDown
clip.setHandCursor( true );
clip.setCSSEffects( true );
clip.addEventListener( 'load', function(client) {
// alert( "movie is loaded" );
} );
clip.addEventListener( 'complete', function(client, text) {
alert("Copied text to clipboard: " + text );
} );
clip.addEventListener( 'mouseOver', function(client) {
// alert("mouse over");
} );
clip.addEventListener( 'mouseOut', function(client) {
// alert("mouse out");
} );
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('clip_text').value );
// alert("mouse down");
} );
clip.addEventListener( 'mouseUp', function(client) {
// alert("mouse up");
} );
clip.glue( 'd_clip_button' );
</script>
</body>
</html>

如果ZeroClipboard.swf檔案文件與ZeroClipboard.js分開不同的目錄存放或不同的路徑,請修改js代碼。
找: clip.glue( ‘d_clip_button’ );
在之上加入︰ZeroClipboard.setMoviePath( ‘/flash/ZeroClipboard.swf’ );

方法二:不需要其他插件,純JS代碼。
<script type="text/javascript">
function jsCopy() {
var e = document.getElementById("contents"); //對象是contents
e.select(); //選擇對象
tag = document.execCommand("Copy"); //執行瀏覽器複製命令
if(tag) {
alert('複製內容成功');
}
}
</script>
<textarea id="contents" cols="40" rows="5"></textarea>
<br />
<input type="button" onClick="jsCopy();" value="複製" />

代碼測試: www.ifreesite.com/runcode.htm

演示網址︰ http://www.ifreesite.com/gbk-big5-gb2312-utf8.htm

標籤: