-
浏览器复制粘贴以及手机端webview复制粘贴
2018-10-15 15:13:28一、浏览器赋值粘贴 1、document.execCommand 这部分参考文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 咱们再浏览器中使用的复制大部分都是用的这个原理 2、例子： //这是一个...展开全文一、浏览器赋值粘贴
1、document.execCommand
这部分参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand咱们再浏览器中使用的复制大部分都是用的这个原理
2、例子：
//这是一个点击方法，放到复制按钮上即可 function copyArticle1() { const range = document.createRange(); //这里的'copyBT 是要复制部分的id range.selectNode(document.getElementById('copyBT')); const selection = window.getSelection(); if(selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); alert("复制成功！"); }缺点：
1、缺点，会复制样式（比如换行） 2、在手机端的webview页面可能会出不来二、手机端的复制
使用第一种方法在浏览器上用的是很顺畅，但是放到安卓和ios手机里面就会有各种问题。so，继续在网上找更好的复制方法
1、使用插件
关于插件的介绍，基本使用，都可以参考这个网址
2、实例
（1）引入JS：
//这里我担心加载网络上的资源会太慢，所以复制JS部分到本地，重命名为copy.js <script src="/m/js/copy.js"></script>（2）有复制按钮 的情况
//在复制按钮上添加点击事件 //data-clipboard-target 这个部分是插件特有的，里面是要复制内容部分的标签id <div id="copy1" data-clipboard-target="#copyBT" onclick="copyArticle1()">复制</div> <td id="copyBT">要复制的内容</td> //js部分 var clipboard = new ClipboardJS('#copy1'); clipboard.on('success', function (e) { //以下部分都可以打印出来 console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); alert("复制成功！"); clipboard.destroy(); });（3）无复制按钮的情况
//data-clipboard-text 这部分对应的是你要复制的内容 <td data-clipboard-text="要复制的内容" id="copy1" onclick="copy1()">要复制的内容</td> //JS function copy1(key) { var clipboard = new ClipboardJS("#copy1"); clipboard.on('success', function (e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); alert("复制成功！"); clipboard.destroy(); }); }3、缺点
这个复制插件有个缺点，那就是：多次点击复制，多次弹出alert
参考链接：https://blog.csdn.net/qq_33285313/article/details/78551411
**解释：**实践总结这是因为第一次来 this.clipboard= new Clipboard(’.acctnobtn’)的时候实例化了一次，返回上级界面第二次再次进入这一界面的时候又this.clipboard= new Clipboard(’.acctnobtn’)了一次，所以说再次点击会弹出两次 复制成功，如果每次关掉界面前不去销毁this.clipboard 这一实例的话，每次打开这一界面就会实例化 +1，所以要想解决这个问题的话必须每次关掉这一界面前要销毁这一实例
解决方案：
需要在每次复制完毕销毁掉clipboard对象 clipboard.destroy();以上就是复制粘贴部分的介绍了。话说几天不写博客，界面变化真大，看起来怪怪的。
end
-
Chrome浏览器——复制网址＋标题以及如何复制粘贴网页不能复制粘贴的内容
2019-09-18 08:17:42这个功能在智慧浏览器上是默认存在的，所以常常将网址复制粘贴到智慧浏览器上，再右键进行复制粘贴，相对麻烦。 Chrome浏览器有一款插件TabCopy可以处理，具体的安装不详细，这里给一个介绍博客Chrome扩展程序——...展开全文1.复制网址＋标题
这个功能在智慧浏览器上是默认存在的，所以常常将网址复制粘贴到智慧浏览器上，再右键进行复制粘贴，相对麻烦。
Chrome浏览器有一款插件TabCopy可以处理，具体的安装不详细，这里给一个介绍博客Chrome扩展程序——TabCopy：一键复制网页标题和网址 - Erik_ly的博客 - CSDN博客
2.如何复制粘贴网页不能复制粘贴的内容
方案一：如何复制chrome浏览器上禁止复制的网页文字-百度经验
F12 console document.body.innerText方案二：
下载Chrome插件Enable Copy，给一个教程chrome插件完美解决【网页不能复制】问题 - 天地一沙鸥GW - CSDN博客
现在简直不能太方便了，满意！
-
ZeroClipboard2跨浏览器复制粘贴
2016-07-24 21:13:52摘要：我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生js代码来实现，是困难的，幸好ZeroClipboard的出现，解决了这一尴尬的问题。ZeroClipboard2简介在前端页面设计时，按钮常常伴随...展开全文摘要：我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生js代码来实现，是困难的，幸好ZeroClipboard的出现，解决了这一尴尬的问题。
ZeroClipboard2简介
在前端页面设计时，按钮常常伴随着数据的提交或重置出现。然而某一次，需求是点击按钮，将后台展示在页面的特定内容复制到剪切板，这样用户就省去了选中文字并按Crtl+C的操作。这使我有机会接触并使用到了一款好的工具：ZeroClipboard2。
ZeroClipboard2实现原理很简单：利用透明的 flash 覆盖在复制按钮上，点击 flash，将复制内容传入到 flash 中，再通过 flash 把传入的内容写到剪贴板上。
ZeroClipboard2使用方法也简单粗暴：把 flash 和 js 放到同一路径下，然后引用 js 即可。ZeroClipboard2简单应用
先看一个例子，了解一下最简单的ZeroClipboard2使用：
可能用到的工具
- ZeroClipboard2.2.0
- Eclipse 4.5
- Tomcat 7
- JQuery 1.7.2
- ExtJs如下 clip.html
<!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>ZeroClipboard 测试</title> </head> <body> 文本： <input type="text" name="txt" id="content" value="要复制的内容" /> <button id="copy" data-clipboard-target="content">copy</button> <br /><br /> 粘贴： <input type="text"> </body> </html> <script type="text/javascript" src="js/ZeroClipboard.js"></script> <script type="text/javascript" > window.onload = function(){ var clip = new ZeroClipboard(document.getElementById("copy")); }; </script>项目的骨架：
使用时需要引入ZeroClipboard2所需要的文件ZeroClipboard.js和ZeroClipboard.swf文件，建议将其放入一个目录下。
代码中用到的data-clipboard-target属性是为了指定要复制内容的id，ZeroClipboard 将依次尝试通过该元素的value、textContent、innerText属性来获取文本数据，将content的数据绑定到id为copy的button上。
由于 Flash 本地沙箱的安全限制，以上代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作。我是用Tomcat运行的，而且如果是Eclipse默认方式打开的页面，也是不能工作的，需要在本地浏览器中打开。在chrom中打开：
点击copy,在粘贴栏中Ctrl+v,即可看到效果：
ZeroClipboard2与JQuery ：
实际使用时，我们很少将js代码与html代码放在一起，而是引入js文件,可能还会用到JQuery。
改进 clip.html<!DOCTYPE HTML> <html > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>ZeroClipboard 测试</title> </head> <body> 文本： <input type="text" name="txt" id="content" value="要复制的内容" /> <button id="copy" data-clipboard-target="content">copy</button> <br /><br /> 粘贴： <input type="text"> </body> </html> <script type="text/javascript" src="js/ZeroClipboard.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="js/demo.js"></script>引入的demo.js
$(document).ready(function(){ var clip = new ZeroClipboard($("#copy")); });项目的骨架：
ZeroClipboard2与ExtJs：
在生产环境中，我们使用的是ExtJs。在这个过程中，最难控制的就是何时初始化ZeroClipboard，因为ExtJs的按钮是在后期生成的，我不能很容易的添加诸如
data-clipboard-target属性的方法告诉ZeroClipboard去复制什么内容，也没有一个很清楚的位置去写new ZeroClipboard()这样的逻辑，那么该如何处理呢？- ExtJs 应该在适当的位置初始化ZeroClipboard
在使用ExtJS创建button时，常常使用如下方法：
Ext.onReady(function(){ var buttonName = new Ext.Button({ id:"buttonName", renderTo:Ext.getBody(), minWidth:100, handler:function(){ Ext.MessageBox.show({ title: '提示' , msg: '你点击了我！' , buttons: Ext.MessageBox.OK , fn: function(){} }); } }); });那么在初始化button时，就应该考虑初始化ZeroClipboard。你可以在浏览器的console中查看初始化是否完成。
- 在页面加载完成以后，在浏览器中应该存在ZeroClipboard对象。
- 使用自带方法查看：ZeroClipboard.state()
- 如果一切顺利，可以看到ZeroClipboard.state().flash.ready的值为true.- 使用ZeroClipboard自带的复制方法
有时候，我们无法给button设置data-clipboard-target属性，可以使用ZeroClipboard自带的复制方法绑定数据。
其中
setText()是最简单且常用的方法var clip = new ZeroClipboard($("#copy")); clip.setText($("#content").val()); //可以设置3中格式，带有格式的内容粘贴到不同的程序，显示对应的效果 clip.setText("复制的内容"); clip.setHtml("<p>复制的内容</p>"); clip.setRichText("{\\rtf1\n{\\b 复制的内容}}");还有一种通用的设置方法
setData()clip.setData("text/plain", "复制的内容"); clip.seData("text/html", "<p>复制的内容</p>"); clip.setData("application/rtf", "{\\rtf1\n{\\b 复制的内容}}");ZeroClipboard2第一次复制不生效：
在ZeroClipboard2与ExtJs结合使用时，我发现，每次复制的第一次不生效，需要点击第二下复制按钮，才能实现复制效果。在琢磨之后发现，我在绑定数据的时候使用的是
setText()方法，而该方法设置的数据是一次性的，使用该方法设置复制数据后，只在下一次复制操作时生效。之后即使你点击复制按钮也不再执行复制，除非你再次调用setText()方法。
解决这个问题，我们在button的回调函数中使用了的事件copy,改用setData()方法：clip.on("copy", function(e){ e.clipboardData.setData("text/plain", "复制的文本") });
- ExtJs 应该在适当的位置初始化ZeroClipboard
-
Android TextView 复制粘贴 仿QQ空间、浏览器功能
2014-09-18 15:36:18Android TextView 复制粘贴 仿QQ空间、浏览器功能 -
safari浏览器复制粘贴
2013-05-21 16:51:01换了苹果笔记本，window下的复制粘贴，在safari上不管用了。 可以这样做，选中要复制的网页内容，2个指头同时按一下触摸板中间部分，就会弹出复制、粘贴的选项。 百度的长时间按住在我的电脑上不管用。展开全文换了苹果笔记本，window下的复制粘贴，在safari上不管用了。
可以这样做，选中要复制的网页内容，2个指头同时按一下触摸板中间部分，就会弹出复制、粘贴的选项。
百度的长时间按住在我的电脑上不管用。
-
js实现pc浏览器复制粘贴功能
2017-06-02 16:03:46">（正常复制粘贴）</span></div> <div class="ant-steps-item ant-steps-status-process"><div class="ant-steps-tail"><i></i></div><div class="ant-steps-step"><div class="ant-steps-head"><div ... -
破解浏览器只能输入，不能复制粘贴
2019-07-31 15:34:57以chrome浏览器为例 步骤： F12---->选择console---->F1，此时我们看到的是setting。如下图： 选中红框圈住的，然后关闭setting。此时即可复制粘贴了 -
浏览器点击复制粘贴到剪切板的解决
2018-09-14 13:09:00稍微研究了下关于H5的复制粘贴到剪切板的api，感觉兼容不尽人意 要么就是浏览器之间，要么就是方法需要支持https才可以，寻找了很久才找到一个符合我期许的一个插件clipboard.js 使用方法也是比较简单，直接引入js... -
解除浏览器不能切屏和不能复制粘贴的操作
2020-12-13 00:20:01/** * 操作说明 * 1.在当前页面按f12，在cosnole控制台下... //解除复制粘贴限制 window.oncopy=window.onpaste=document.oncopy=document.onpaste=document.body.oncopy=document.body.onpaste= oncopy=onpaste=null; -
clipboard使用总结 兼容各浏览器的复制粘贴功能
2019-06-11 11:15:27https://juejin.im/entry/5a5f3821518825734d14a754 -
js复制 兼容浏览器
2021-07-27 14:51:49情景：有的浏览器复制后可以粘贴出来复制的内容，有的浏览器粘贴不出复制内容。 尝试的浏览器：1、谷歌浏览器可以复制并粘贴。 2、sarari、360浏览器可复制，但是粘贴不出东西（其他浏览器未试） 原因： 1、这是... -
选中网页内容safari浏览器复制粘贴
2013-05-21 20:23:00换了苹果笔记本，window下的复制粘贴，在safari上不管用了。 每日一道理 如果人类不好好保护我们这个赖以生存的地球，终有一天，风沙的肆虐与垃圾的堆积会吞没我们美丽的家园。我向全世界的人们呼吁：让我们... -
监听浏览器复制粘贴事件&&开箱即用的复制到剪切板
2017-10-31 09:52:52监听键盘ctrl+c ctrl+v area.onkeydown = (event) => { if (event.ctrlKey) { if (event.keyCode == 67) { alert('ctrl+c复制') event.keyCode = 0; } -
兼容所有浏览器的js简单手动复制粘贴文本方法
2020-04-09 20:00:51兼容所有浏览器的js简单手动复制粘贴文本方法 因为比较简单所以就简短说三步： 创建一个不显示在页面上的textarea/input标签 将需要复制的值设置到标签的value属性上 获取标签dom调用select方法选中所有内容，调用... -
网页内容复制粘贴(三种方案 兼容多种浏览器)
2017-12-11 12:11:11网页内容复制粘贴(三种方案 兼容多种浏览器) 对网页上的内容实现复制粘贴的功能 痛点：需要支持多种不同的浏览器 主要有IE，Firefox IE浏览器下的解决方案： window.clipboardData.setData("Text", text); 通用... -
原生 JS 实现浏览器的复制粘贴功能
2019-04-26 17:32:13input 元素不能设置disabled或者display:none，否则复制功能将不起作用 <input id="shareInp" style="opacity:0;width:66px;" /> <button id="shareBtn">分享</button> $("#shareInp").... -
一句代码搞定浏览器复制文本和兼容性问题【复制粘贴js库】
2020-03-08 17:49:37一句代码搞定浏览器复制文本和兼容性问题【复制粘贴js库】 文本复制在前端可以说是一个比较常用的功能，但是官方的API和一些现有的库不易使用，而且使用复杂，兼容性也可能会有问题。 于是本人封装了一个自己经常... -
js复制、粘贴到浏览器（原生、IE不兼容）
2018-11-12 11:27:26一、最近有需求需要复制图片（Ctrl+C）到浏览器进行粘贴（Ctrl+V）然后进行粘贴的内容上传到服务器，因以前上传文件都是通过插件来进行实现，所以并没有做过多的学习，以下代码是基于其他网友文章中提供的内容，主要... -
ZeroClipboard 完美实现复制粘贴功能、跨浏览器兼容
2013-04-09 12:31:55ZeroClipboard是通过flash+js实现复制到剪切板功能，浏览器兼容性好。工作原理大概是：在“复制”按钮上遮罩一个透明的flash，flash被点击后，会调用其的剪切板处理功能，完成对文本内容的复制。 下载 ... -
html5 手机uc浏览器 复制链接,UC浏览器里任意复制粘贴文本的方法
2021-06-13 01:12:35UC浏览器里任意复制粘贴文本的方法由于诺基亚5800xm是智能机，使用uc想复制粘贴文本时，没有直板健盘手机方便，但复制粘贴这个基本的功能实在是好用。为了让大家可以更加方便的使用复制与粘贴功能，为大家分享“巧用... -
智慧树如何复制粘贴
2020-07-03 06:49:24智慧树如何复制粘贴 -
clipboard 插件的使用（浏览器的复制粘贴功能）
2019-05-09 10:00:45#兼容性 一、npm 下载 npm install clipboard --save 二、导入组件 import Clipboard from 'clipboard' 三、使用 复制 <... -
支持大部分浏览器（兼容）的复制粘贴功能
2020-03-27 09:47:20" onclick="copyLinkData('invite-buy-link')">点击复制</a> </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script> console.log($('#invite-buy-link').val())... -
用js限制网页只在微信浏览器中打开，复制粘贴即可使用
2016-09-21 15:03:04经常需要做一些表单验证和投票，为了防止恶意刷票，使页面不能在微信以外的浏览器中打开 这是js的代码： script type="text/javascript"> function is_weixin(){ ... //判断浏览器的类型 if(ua.match(/Mi -
vim代码复制到浏览器 && 粘贴混乱的问题
2018-09-18 14:35:03sudo apt-get install vim-gnome sudo apt-get install vim-gui-common 这句也行的 ...why:默认安装的vim不支持xtem_clipboard，无法复制到+寄存器 进入vim中一顿操作如下 ggVG&quot;+y 然后就可以复... -
不是会员不让复制粘贴？看我“三板斧”！
2021-05-09 18:43:25不知道你有没有过这样的经历，我们在网上好不容易搜索到自己想要的内容，复制粘贴时，却被网站要求注册或者购买VIP会员，非常得令人生气和无奈。今天，我们就来介绍一个非常好用的方法来解决这一系列问题。 正文 ...
