1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-ZeroClipboard 將網頁輸入框值複製到剪貼簿

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=“http://www.minwt.com"/>
<a href=“#” id=“copy-btn”>複製</a>

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