jQuery 點擊 Input / Textarea 全選、複製的寫法(Widget)

最近寫不少 Widget / Badge / 外掛工具, 順便做點小筆記.

首先要寫外掛工具, 就會有個 Input / Textarea 的欄位, 裡面放要讓人嵌入的程式碼, 然後旁邊要有個按紐, 是可以點擊就可以自動將程式碼複製進剪貼簿的功能, 所以下述會有幾個步驟:

  1. 點擊 Input / Textarea 全選
  2. 設定 Input / Textarea 裡面的值不能被修改
  3. 點選複製功能
  4. IE/Firefox 有異常的處理
  5. 完整 jQuery 程式碼

HTML 區塊範例


<div id="badge">
    <input class="badge-code" type="text" value=".... badge-code ....">

    <input class="badge-code" type="text" value=".... badge-code ...." readonly>


    <input class="badge-code-hidden" type="hidden" value=".... badge-code ....">
    <!-- badge-code-hidden 下面會說明要做何用途 -->
    <a id="copy-embed-code" href="#">複製程式碼</a>
</div><!-- #badge -->

點擊 Input / Textarea 全選


$("#badge .badge-code").click(function(){
    this.select();
});

設定 Input / Textarea 裡面的值不能被修改

註: 設定 input readonly 的話, 此段就不需要了.

在上面有看到此段 <input class="badge-code-hidden" type="hidden" value=".... badge-code ....">, 此行的 badge code 和上面秀出來的都一樣, 為的就是這行不會被使用者改到, 若上述的 Input / Textarea 欄位, 在 Javascript 被執行前, 就被使用者改到, 反而會讓使用者拿不到正確的 Widget code.


var copydata = $("#badge .badge-code-hidden").val(); // 先取得 hidden 正確的 Widget code value.
/* 使用者若有對此欄位做任何修改, 都將它恢復成原始預設值 */
$("#badge .badge-code").bind("keydown keypress keyup", function(e){
    $("#badge .badge-code").val(copydata);
    this.select();
});

點選複製功能

在上面有看到 複製程式碼 的 HTML 區塊, 此時需要此 Guapo - jQuery copy plugin, 它會透過 Flash 幫我們將值複製到剪貼簿.

  1. 下載 Guapo - jQuery copy plugin - jquery.copy.js, copy.swf
  2. 加入此段 <script type="text/javascript" src="jquery.copy.js"></script>
  3. 程式碼加入此段


    $("#copy-embed-code").click(function(){
        alert('程式碼已複製');
        $.copy($("#badge .badge-code").val());
    });

IE/Firefox 有異常的處理

此 jQuery copy plugin 在 Firefox 3.x 版早期前都是可以用的, 但是現在最新的 Firefox 不支援, 所以就讓此自動複製的功能, 只在 IE 秀出來, Firefox 不秀, 於 CSS 做下述設定:

style.css


#copy-embed-code {display:none;}

設定 IE 才看的到此段 css - ie-style.css


<!--[if IE]>
<link rel="stylesheet" href="ie-style.css" type="text/css">
<![endif]-->

ie-style.css 內容


#copy-embed-code {display:inline;}

完整 jQuery 程式碼


/* 全選 */
$("#badge .badge-code").click(function(){
    this.select();
});

/* 禁止修改, 如果設定 readonly, 此段則可省略 */
var copydata = $("#badge .badge-code-hidden").val();
$("#badge .badge-code").bind("keydown keypress keyup", function(e){
    $("#badge .badge-code").val(copydata);
    this.select();
});

/* 複製 */
$("#copy-embed-code").click(function(){
    alert('程式碼已複製');
    $.copy($("#badge .badge-code").val());
});

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈jQuery 點擊 Input / Textarea 全選、複製的寫法(Widget)〉中有 20 則留言

  1. 感恩, 我都忘了有這招了.. Orz..
    不過順便修正個小錯誤, input type="text" readonly 這樣子就可以了, type="readonly" 沒有用~ 🙂

  2. 嗯嗯, IE 是可以不用全選複製, 但是 Firefox 目前沒有辦法複製, 所以為了讓使用者方便點, 直接按下去先全選, 再讓他自行複製應該會比較好~ 🙂

  3. 我試不行耶, 我之前試是可以的, 但是在某次升級後, 好像在 FF 3.x 版以上, 就不能 copy 了. (您提供的網址, 我在 FF 還是不能 copy 耶)

Arthas 發表迴響取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料