jQuery教學-ZeroClipboard 將網頁輸入框值複製到剪貼簿

梅問題-jQuery應用-ZeroClipboard將網頁輸入框複製到剪貼簿
  有用過MediaFire雲端空間的朋友,應該不難發現到,當把檔案上傳到空間後,只要點一下Share Link,就會自動將連結網址,直接複製到剪貼簿中,這看似乎平常的功能,其實一點也不簡單,而有在觀注梅問題的朋友,應該有發現到,在黑莓10使用嘸蝦米的文章中,梅干也有用到此功能,其實需使用zClip外掛的搭配才行喔!同時還需在Web主機中才能運作,因此在本機是無法預覽結果的,所以待回各位在測試時,一定要將網頁丟到Web主機中才行喔!至於怎麼用呢?現在就一塊來看看吧!

zClip外掛:
外掛名稱:zClip
外掛網址:http://www.steamdev.com/zclip/

Javascript:
放在<head>.....</head>之間:
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script>
$(function(){
    $('#copy-btn').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){
			return $('#ipt').val();
		}
	}).click(function(){
		$("#ipt").val('');
		alert('已複製到剪貼薄');
	});	
});

</script>

Html:
放在<body>.....</body>之間:
<input style="width:300px; margin-left:15px;" type="text" id="ipt" value="https://www.minwt.com"/>
<a href="#" id="copy-btn">複製</a>

[範例預覽] [範例下載]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    侯永禄 說道:

    在我测试的时候,发现IE9以下版本的浏览器不能复制,请问是为什么?(另外你是港澳台同胞吧?能看懂简体字吗?)

    回應:
    應該是把flash關閉了