jQuery简单实现点击文本框复制内容到剪贴板上的方法

jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。在这个实例中，我们将探讨如何使用jQuery来实现一个功能，即当用户点击文本框时，自动将文本框中的内容复制到剪贴板上。这个功能在很多网站中都有应用，例如复制链接、代码或重要信息。 我们需要了解浏览器对剪贴板操作的支持。在不同的浏览器中，实现剪贴板读写的方式略有不同。对于IE浏览器，我们可以使用`window.clipboardData`对象；而对于非IE浏览器，如Firefox、Chrome等，我们需要使用更复杂的API，如`nsIClipboard`接口。 以下是实现这个功能的jQuery代码： ```javascript // 定义复制到剪贴板的函数 function copyToClipboard(txt) { // 针对IE浏览器 if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上！"); } // Opera浏览器的特殊处理 else if (navigator.userAgent.indexOf("Opera") != -1) { window.location = txt; } // 非IE浏览器，如Firefox、Chrome等 else if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'"); } var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); var copytext = txt; str.data = copytext; trans.setTransferData("text/unicode", str, copytext.length * 2); var clipid = Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans, null, clipid.kGlobalClipboard); alert("已经成功复制到剪帖板上！"); } } // 设置文本框的点击事件 function setCopyLink() { // 获取页面URL并赋值给文本框 $("#txt_CopyLink").val(document.URL) // 点击时选中文本并复制 .focus(function () { $(this).css({ "background-color": "#ddd" }).select(); // 选中文本并改变背景色 copyToClipboard($("#txt_CopyLink").val()); // 调用复制函数 }) // 失去焦点时恢复样式 .blur(function () { $(this).css({ "background-color": "#fff" }); }); } ``` 在这个例子中，`setCopyLink`函数首先将当前页面的URL赋值给ID为`txt_CopyLink`的文本框。然后，我们为这个文本框添加了`focus`和`blur`事件监听器。当文本框获得焦点（用户点击）时，会选中文本并调用`copyToClipboard`函数进行复制。当文本框失去焦点时，背景颜色恢复原状。 `copyToClipboard`函数是实现复制的核心。它根据浏览器类型，分别采用不同的方式将文本复制到剪贴板。对于IE，使用`window.clipboardData`对象；对于非IE浏览器，特别是Firefox，需要使用`Mozilla`的`nsIClipboard`接口。在非IE浏览器中，可能需要用户手动开启权限，因为出于安全考虑，浏览器默认限制了剪贴板的操作。 这个功能对于那些希望提供便捷复制服务的网站非常有用，例如复制文章链接、代码示例或者重要的提示信息。通过使用jQuery，我们可以轻松地为文本框添加复制功能，同时兼容多种浏览器，提高用户体验。