复制到剪切板兼容(IE/FF/Chrome/..)

Dear 丶 2021-12-07 12:21 354阅读 0赞

最近做一个复制到剪切板的功能   在网上找了很多都不好用

最后发现在了  这篇文章很不错  简洁好用   贴出来  希望能帮到更多人

原文地址：[http://www.lsproc.com/wiki/snippets:copytoclipboard][http_www.lsproc.com_wiki_snippets_copytoclipboard]

此代码修改自 discuz!, 简易实现

<script>
    var clipboardswfdata;
              
    var setcopy_gettext = function(){
        clipboardswfdata = document.getElementById('data').value;
        window.document.clipboardswf.SetVariable('str', clipboardswfdata);
    }
              
    var floatwin = function(){
        alert('copy success, ' + clipboardswfdata);
    }
    </script>

<style type="text/css">
    body {font-size:12px;}
    .clipinner {position:relative;}
    .clipboardswf {position:absolute; left:0; top:0;}
    </style>
            
    <input type="text" name="data" value="xxxxx11111" id ="data" />
    <div id="clipboard_content">
    <span class="clipinner" id="clipinner">点此复制到剪贴板
    <embed name="clipboardswf" class="clipboardswf" id="clipboardswf" οnmοuseοver="setcopy_gettext()" devicefont="false" src="./clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100">
    </span>
    </div>

实现稍微有些恶心, 用 onmouseover 事件往 flash 中传递数据   
另: 没有对ie单独处理, ie中推荐使用 window.clipboardData

演示地址: [http://www.lsproc.com/demo/clipboard/demo.html][http_www.lsproc.com_demo_clipboard_demo.html]

下载:[clipbord.zip][]

另: google code 上有个 zeroclipboard 的项目, 如果想要方便的话, 也可以使用

地址: [http://code.google.com/p/zeroclipboard/][http_code.google.com_p_zeroclipboard]

[http_www.lsproc.com_wiki_snippets_copytoclipboard]: http://www.lsproc.com/wiki/snippets:copytoclipboard
[http_www.lsproc.com_demo_clipboard_demo.html]: http://www.lsproc.com/demo/clipboard/demo.html
[clipbord.zip]: http://www.lsproc.com/wiki/_media/snippets:clipboard.zip
[http_code.google.com_p_zeroclipboard]: http://code.google.com/p/zeroclipboard/

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 将内容复制到剪切板上

clipboard是将内容复制到电脑的剪切板上,要引入clipboard.js //将'data-clipboard-text' 样式添加到指定的元素上 $("

怼烎@/ 2023年06月03日 04:55/ 0 赞/ 5 阅读

相关 JQuery复制文本到剪切板

需求：点击按钮，将特定的文本内容复制到剪切板上，方便在其它地方进行粘贴。 -------------------- 代码： html:(记得引用jquery.js)

- 日理万妓/ 2023年03月06日 05:19/ 0 赞/ 43 阅读

相关 vue：复制文字到剪切板

一、安装 npm install --save vue-clipboard2 二、在main.js文件中引入和使用复制包（全局使用） import Vue

拼搏现实的明天。/ 2023年01月10日 01:26/ 0 赞/ 233 阅读

相关 React 中实现复制到剪切板功能

React 中实现复制到剪切板功能前言最终实现方法中间踩坑前言最近有一个需求是在文章列表中实现一个【复制链接】的功能。如图： ![在

阳光穿透心脏的1/2处/ 2022年12月29日 14:29/ 0 赞/ 355 阅读

相关 js复制文本内容到剪切板

<script type="text/javascript"> function copyUrl2() { var Ur

淡淡的烟草味﹌/ 2022年11月10日 05:30/ 0 赞/ 275 阅读

相关 JS复制内容到剪切板

Html <input id="demoInput" v-model="url.pcPlayUrl" > <el-button

深藏阁楼爱情的钟/ 2022年04月06日 01:36/ 0 赞/ 349 阅读

相关 js复制内容到剪切板方法封装

// 复制的方法 function copyText(text, callback){ // text: 要复制的内容， callback: 回调

绝地灬酷狼/ 2022年04月04日 04:50/ 0 赞/ 383 阅读

相关 vue 点击按钮复制指定内容到剪切板，复制变量值到剪切板

1.安装插件 npm install --save vue-clipboard2 或者 cnpm install --save vue-clipboard

深藏阁楼爱情的钟/ 2022年01月28日 08:36/ 0 赞/ 499 阅读

相关复制到剪切板兼容(IE/FF/Chrome/..)

最近做一个复制到剪切板的功能在网上找了很多都不好用最后发现在了这篇文章很不错简洁好用贴出来希望能帮到更多人原文地址：[http://www.

Dear 丶/ 2021年12月07日 12:21/ 0 赞/ 355 阅读

相关 js实现复制文本内容到剪切板

原文出处：[https://blog.csdn.net/github\_36091081/article/details/77508710][https_blog.csdn.n

水深无声/ 2021年09月16日 03:06/ 0 赞/ 525 阅读