js 复制文本的四种方式
一、总结
一句话总结:js文本复制主流方法:document的execCommand方法
二、js 复制文本的四种方式
纯 转载复制,非原创
原地址:http://www.cnblogs.com/xhyu/p/5370111.html
目前copy主流有四种方式:ZeroClipboard,Clipboard.js,execCommand,setData,再就是其他只支持IE的鸡肋法了不在此讨论。。
概况:
ZeroClipboard 就是常说的Flash法,通过加载一个Flash,让其访问系统剪贴板来绕过绝大多数系统的权限限制,然而体积稍微庞大些
Clipboard.js 近几年使用较多,体积相对小,兼容性可以接受,使用还比较方便。
execCommand 新兴势力,safari等主流正在努力兼容,是个好东西。
setData 太老。。一般不太用,基本只适合IE
兼容性:
ZeroClipboard 兼容性最好,能全面兼容chrome/ FireFox/ IE/ 甚至Safari 这种“友好”的浏览器
Clipboard.js和execCommand兼容性相似,兼容chrome/ FF/ IE>9/ Safari新版(不太懂Safari版本号如何算。。感觉15年以后的都可以)
setData 仅IE
体积:
ZeroClipboard 插件较大,230KB
Clipboard.js 较小,4KB
execCommand是document方法,不用插件直接搞
虽说体积有差,加载起来速度差不多的其实。。话说git好像就是用的ZeroClipboard
Clipboard.js 实验经过:
直接忽略胖胖的Flash法,,先盯上的Clipboard.js,用起来着实简单,先引用压缩版:
- <script src="dist/clipboard.min.js"></script>
新建Clipboard对象(顺便:'.btn'给所有class="btn"的元素都加了监听,其他用法可查JS)
- var clipboard = new Clipboard('.btn');
- //可以自己加些处理
- clipboard.on('success', function(e) {
- console.info('Action:', e.action);
- console.info('Text:', e.text);
- console.info('Trigger:', e.trigger);
- e.clearSelection();
- });
- clipboard.on('error', function(e) {
- console.error('Action:', e.action);
- console.error('Trigger:', e.trigger);
- });
HTML里这样就OK了
- <button class="btn" data-clipboard-target="#foo">
使用清爽,测试通过,然而项目只有一个地方用到copy,为了他加个插件真是不优美。。于是终于找到了近期出现的execCommand()大法 (生在了好时代Orz)
execCommand()大法:
其实只需要选中要复制的内容,执行document.execCommand('copy', false, null)就好了。execCommand里可以跑很多例如paste等方法,第一个参数是方法名,第二个是是否展示默认ui,第三个是可选参数列表,对copy来说后两个都用不到。
根据兼容不同,执行后可能的情况(涉及返回值):
1.不支持execCommand:抛出异常 2.不支持copy方法:返回false 3.成功:true
因此框架可以这样写:
- copy_target.focus();
- copy_target.select();
- try{
- if(document.execCommand('copy', false, null)){
- //success info
- } else{
- //fail info
- }
- } catch(err){
- //fail info
- }
给用户的反馈用的jquery的tooltip,然后写成一个function就是如下:
- function copy(copytargetid,copybtnid){
- var cpt = document.getElementById(copytargetid);
- var cpb = document.getElementById(copybtnid);
- $(cpt).focus();
- $(cpt).select();
- try{
- if(document.execCommand('copy', false, null)){
- $(cpb).tooltip({title:"copied!", placement: "bottom", trigger: "manual"});
- $(cpb).tooltip('show');
- cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};
- } else{
- $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
- $(cpb).tooltip('show');
- cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};
- }
- } catch(err){
- $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"});
- $(cpb).tooltip('show');
- cpb.οnmοuseοut=function(){$(cpb).tooltip('destroy')};
- }
- }
用的时候直接
- <button id="cpbtn" οnclick="copy('cptar', 'cpbtn')">copy</button>
即可
到此还没有结束。。。
项目用的vue,于是需要做成vue的method,又是用coffee写的,改了下语法,在初次渲染的html中测试通过了,然后。。。我的copy妞是个vex模态框。。button是写在vex.dialog.open的message里的,message是个字符串,弹窗时候强注一段html。而且vue函数是只在渲染阶段绑定,所以。。。初次vue渲染的时候不会识别到字符串中的v-on:click,无法绑定。。于是不能从button元素直接调。
决定搞一个隐藏input中继一下,最后终于用比较优美的姿势实现了。。。(上次是直接在message里强行注入script。。。涉及script嵌套还加了个转义<\/script>,结果丑的一bi。。)
button里 οnclick="document.getElementById('copyrelay').select()",input里@select('copy(...)')(@是vue的v-on:的缩写)。
终于测试一切完好,天真的以为加个display: none就大功告成。。结果发现跪了
原来是display:none的元素并不能被select。。
同样的,也不能focus, change等等,于是顺着onerror等事件挨个试了一遍。。发现貌似只有onclick work。。。
另外还顺带试了一下,<input type="hidden"/>也是不能用那些事件;即使正常显示元素,value=""的话也不能触发select。
当然,至于是.select()没有成功,还是元素没有触发select事件,还是没有触发v-on:select,有待确定,有时间可以试一下。
Anyway,最终代码:
- <input id="copyrelay" style="display: none;" @click=“copy('cptg','cpbt')”/>
- <!--vex.dialog.open的message中:-->
- <input id="cpbt" type="button" οnclick="document.getElementById('copyrelay').click()"/>
- <input id="cptg" value="copy test" readonly/>
method中的copy函数如上所提,转为coffee。
我这个伪frontend太弱了。。
js 复制文本的四种方式相关推荐
- Js中自定义对象四种方式
Js中自定义对象四种方式 1 类似JAVA有参构造方式: 1.定义对象: function 对象(属性[age]){追加属性:如(this.age = age)[this代表当前对象的地址值的引用]追 ...
- js 正则 数据类型检测四种方式
数据类型检测 1.typeof 1.返回字符串,字符串包含了对应数据类型2.不能检测null3.不能检测对象数据类型 2.instanceof 检测实例是否属于某个类的方法 1.只要当前类的原型在当前 ...
- js数组去重的四种方式
// 删除重复的 function only(arr){for(var i=0;i<arr.length;i++){for(var j = i+1;j<arr.length;j++){if ...
- Java实现文件复制的四种方式
背景:有很多的Java初学者对于文件复制的操作总是搞不懂,下面我将用4中方式实现指定文件的复制. 实现方式一:使用FileInputStream/FileOutputStream字节流进行文件的复制操 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
- html引入原生js,html怎么引用JavaScript?html引入js路径四种方式
html是静态的页面,如果我们想要实现某些动画效果,就要引入一些js,那么,如何在html中引用一些js文件呢,引入js有哪些方式呢,下面我们来总结一下html引入js路径四种方式. 一:html怎么 ...
- java arraylist 复制_Copy ArrayList的四种方式
简介 ArrayList是我们经常会用到的集合类,有时候我们需要拷贝一个ArrayList,今天向大家介绍拷贝ArrayList常用的四种方式. 使用构造函数 ArrayList有个构造函数,可以传入 ...
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
最新文章
- Vmware Workstation VMX 在资源管理器中杀不掉(虚拟机繁忙导致无法关机)
- 离散数学当中的部分符号总结
- 临时表空间过大解决方法
- svn 服务器在生产环境中的搭建
- 在html中超链接_HTML 超级链接详细讲解
- linux 两个驱动 竞态,第7章 Linux设备驱动中的并发控制之一(并发与竞态)
- (Python基础)集合操作
- mysql 是否为空字符串_MySql判断是否为null或空字符串
- 备战美赛,这些你应该知道的知识点
- Dede更新提示DedeTag Engine Create File False的解决办法
- armbian nginx 部署博客_通过Git将Hexo博客部署到服务器
- 取代cookie的网站追踪技术:”帆布指纹识别”初探
- 三星Galaxy M52 5G通过认证:两个版本 搭载骁龙778G芯片
- 在Windows Server2008上安装SQL2008群集
- 做游戏,学编程(C语言) 5 数组之生命游戏
- Win11开机桌面假死怎么办 win11开机桌面假死的解决方法
- 与朋友分享的生活日记
- Unity官方文档解读之如何使用粒子系统创建汽车尾气
- Go实战--golang中使用echo框架中JSONP(labstack/echo)
- Tomcat之Web 应用配置
热门文章
- pdf转换成txt在线转换
- java so reuseport_强大的SO_REUSEPORT
- 13-23java_Java-13,static关键字
- openssl 编译 *** [c_zlib.o] Error 1 错误
- 在各大厂的秋招春招中,笔试面试都是必考的
- php如何读冻,天寒地冻玻璃碴跪求php解密方法求大神呢
- PyTorch-16 seq2seq translation 使用序列到序列的网络和注意机制进行翻译
- VMware Linux 下安装 Oracle 11gR2 RAC
- Matlab实现神经网络(附上完整仿真源码)
- i5 1130g7参数 i51130g7怎么样