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

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

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

點擊 Input / Textarea 全選
設定 Input / Textarea 裡面的值不能被修改
點選複製功能
IE/Firefox 有異常的處理
完整 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 ....">  <a id="copy-embed-code" href="#">複製程式碼</a> </div>

點擊 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 幫我們將值複製到剪貼簿.

下載 Guapo - jQuery copy plugin - jquery.copy.js, copy.swf
加入此段 <script type="text/javascript" src="jquery.copy.js"></script>
程式碼加入此段
$("#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

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