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());
});