前端复制功能 -- document.execCommand()

前端复制功能的若干 -- document.execCommand()

页面里copy的功能
目前copy主流有四种方式:ZeroClipboardClipboard.jsexecCommand,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);});
[图片上传中。。。(2)]

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
因此框架可以这样写:
[图片上传中。。。(3)]
copy_target.focus();copy_target.select();try{ if(document.execCommand('copy', false, null)){ //success info } else{ //fail info }} catch(err){ //fail info}
[图片上传中。。。(4)]

给用户的反馈用的jquery的tooltip,然后写成一个function就是如下:
[图片上传中。。。(5)]
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.onmouseout=function(){$(cpb).tooltip('destroy')}; } else{ $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"}); $(cpb).tooltip('show'); cpb.onmouseout=function(){$(cpb).tooltip('destroy')}; } } catch(err){ $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"}); $(cpb).tooltip('show'); cpb.onmouseout=function(){$(cpb).tooltip('destroy')}; }}
[图片上传中。。。(6)]

用的时候直接
<button id="cpbtn" onclick="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里 onclick="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')”/><input id="cpbt" type="button" onclick="document.getElementById('copyrelay').click()"/><input id="cptg" value="copy test" readonly/>

method中的copy函数如上所提,转为coffee。

我这个伪frontend太弱了。。还是希望给贵司多搞点贡献。。。
感谢lrx,lyy,P8,zzl,xxm犇们Orz。。。
就这样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,390评论 1 297
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,682评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,205评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,718评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,406评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,590评论 1 170
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,271评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,052评论 0 163
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,801评论 6 227
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,404评论 0 212
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,176评论 2 212
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,489评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,156评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,031评论 2 210
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,402评论 3 201
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,583评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,927评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,352评论 2 228
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,478评论 2 229

推荐阅读更多精彩内容

  • 不支持上传文件,所以就复制过来了。作者信息什么的都没删。对前端基本属于一窍不通,所以没有任何修改,反正用着没问题就...
    全栈在路上阅读 1,921评论 0 2
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,245评论 18 399
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,602评论 2 17
  • 参考使用clipboard.js复制页面内容到剪切板前端复制功能的若干 -- document.execComma...
    合肥黑阅读 2,832评论 1 3
  • YSL原版代购记录 当时买的是小瓶装 343入的 大瓶装的是我今天卖的90ml 就是隔着屏幕你们闻不到味道!真的超...
    痴迷旧戏阅读 129评论 0 0