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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 My_Note-Programming。將永久鏈結加入書籤。

jQuery 點擊 Input / Textarea 全選、複製的寫法(Widget) 有 20 則回應

  1. fauzty 說道:

    input type=readonly 是否就可以避免使用者更改了?

  2. Tsung 說道:

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

  3. feka 說道:

    你好
    不用透過全選好像也可以複製喔 :]

  4. Tsung 說道:

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

  5. Tsung 說道:

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

  6. feka 說道:

    這就怪了…
    我是用3.0.5的
    一切正常

  7. Tsung 說道:

    奇怪, 我找人也是 3.0.5, 不能用耶.. Orz..
    我找了兩個人試過, 都不行耶.

  8. Tsung 說道:

    我找兩個人測過, 還是不行耶. Orz..

  9. 說道:

    那要如何知道使用者目前是否是在用 IE 呢??

  10. Tsung 說道:

    這邊 http://docs.jquery.com/Utilities/jQuery.browser , 可以知道使用者用的瀏覽器是哪一種~ 🙂

  11. Arthas 說道:

    大大可以和交個朋友交流一下嗎?
    有些問題不太好描述的
    我的MSN是thor777@seed.net.tw

  12. Tsung 說道:

    喔喔, 可以阿. 只是要不要先 Email 描述一下?

  13. Tsung 說道:

    style 裡面的註解, 是用 /* */, 不是用 html 註解. 把你那個註解 拿掉就可以了..

  14. Arthas 說道:

    大大想請教一下有什麼比較推薦的模組嗎?
    畫圓餅圖,柱狀圖之類的數據~

  15. 不好意思又來了 說道:

    mssql和mysql的資料庫可以互相轉換嗎??
    好奇問一下,
    可以的話要用什麼轉??

  16. Tsung 說道:

    這個我也不知道耶, 可能得要 select + insert, 再不然就是要 parse mssql 的格式了.
    mssql 倒出來的格式需要額外 parse 一下.

feka 發表迴響 取消回覆

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