javascript常用复制方法copyToClipboard()

//功能:将指定内容复制到剪切板

//来源:http://jorkin.reallydo.com/article.asp?id=457

 

function copyToClipboard(txt) {

     if(window.clipboardData) {

             window.clipboardData.clearData();

             window.clipboardData.setData("Text", txt);

     } else if(navigator.userAgent.indexOf("Opera") != -1) {

          window.location = txt;

     } 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("复制成功!")

     }

}




转载自点击打开链接

<think>好的,用户正在寻找一个JavaScript复制文本插件。首先,我需要理解他们的具体需求。他们可能需要在网页上实现一键复制功能,可能用于多种场景,比如代码片段、链接分享或者表单内容。用户提到的uni-app自定义插件参考,虽然来自前端uni-app的内容,但用户现在需要的是JavaScript原生或通用库的推荐,而不是特定于某个框架的解决方案。 接下来,我得考虑常见的JavaScript复制插件。首先想到的是Clipboard.js,因为它轻量且兼容性好,使用简单,适合大多数情况。然后是execCommand API的原生方法,虽然可能不够稳定,但不需要额外库。还有react-copy-to-clipboard这样的React专用库,如果用户使用React的话。另外,ZeroClipboard过去常用于Flash支持,但现在可能不推荐了,但可以作为旧浏览器的备选。Vue-clipboard2适用于Vue项目,这可能和用户提到的uni-app相关,但用户明确问的是JavaScript插件,所以可能需要区分。 用户可能需要跨平台支持,所以Clipboard.js应该是首选,因为它处理了不同浏览器的兼容性问题。同时,用户可能希望插件有配置选项,比如按钮颜色或反馈提示,这些Clipboard.js通过事件监听可以实现。另外,是否需要可视化配置?引用中的插件提到了可视化配置,但常见的JS库通常通过代码配置,可能需要推荐如何结合使用。 还要考虑用户可能遇到的常见问题,比如兼容性处理,特别是iOS设备的限制,可能需要提示用户注意。另外,安全限制,比如在某些上下文中execCommand不可用,可能需要使用库来绕过。 最后,生成相关问题,帮助用户深入探索,比如如何自定义样式、处理移动端兼容性或实现多内容复制。确保回答结构清晰,分点推荐,并附上示例代码,方便用户快速上手。</think>### JavaScript 文本复制插件推荐及实现方法 以下是几款常用JavaScript 文本复制插件及其实现方法,根据功能特性和适用场景分类推荐: --- #### 一、**Clipboard.js(轻量级首选)** - **特点** - 支持纯文本/HTML 复制 - 自动处理浏览器兼容性问题 - 无需 Flash,依赖 `execCommand` 和 `Selection API` - 提供成功/失败事件回调 - **安装** ```html <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script> ``` - **代码示例** ```html <!-- 定义触发按钮 --> <button class="btn" data-clipboard-text="要复制的文本">复制</button> <script> // 初始化插件 const clipboard = new ClipboardJS('.btn'); // 监听复制结果 clipboard.on('success', (e) => { alert('已复制: ' + e.text); }); </script> ``` - **适用场景** 通用网页开发,支持 IE9+ 和现代浏览器[^1] --- #### 二、**execCommand API(原生方案)** - **特点** - 原生 JavaScript 实现,无需依赖库 - 需要手动创建临时文本域 - **代码示例** ```javascript function copyText(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); console.log('复制成功'); } ``` --- #### 三、**React 生态专用插件** 1. **react-copy-to-clipboard** - 安装 ```bash npm install react-copy-to-clipboard ``` - 代码示例 ```jsx import { CopyToClipboard } from 'react-copy-to-clipboard'; <CopyToClipboard text="复制的文本" onCopy={() => alert('已复制')}> <button>点击复制</button> </CopyToClipboard> ``` --- #### 四、**Vue 生态专用插件** 1. **vue-clipboard2** - 安装 ```bash npm install vue-clipboard2 ``` - 代码示例 ```vue <template> <button @click="copyText">复制</button> </template> <script> import Vue from 'vue'; import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard); export default { methods: { copyText() { this.$copyText('要复制的文本').then(() => { alert('复制成功'); }); } } } </script> ``` --- #### 五、**兼容性增强方案** - **clipboard-polyfill** - 解决 iOS 等环境下复制限制 - 示例代码 ```javascript import * as clipboard from 'clipboard-polyfill'; clipboard.writeText('文本内容').then(() => { console.log('复制成功'); }); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值