Javascript, 網頁設計

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

梅干2013/06/13
梅問題-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>

[範例預覽] [範例下載]
UAG軍規iPhone防摔殼