最近涨停科技公司实习,由于backend基础太弱。。。强行前端了一把。。搞了两周才搞下页面里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);
});

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.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')};
}
}

用的时候直接

<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')”/>

<!--vex.dialog.open的message中:-->
<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。。。

就这样。

前端复制功能的若干 -- document.execCommand()的更多相关文章

  1. JS document.execCommand实现复制功能(带你出坑)

    最近项目中需要实现功能:点击button,复制input框的值: 我使用的是 document.execCommand('copy')的方法: 但是很郁闷的是,始终实现不了功能:代码如下 HTML代码 ...

  2. ios9.3.3版本下 document.execCommand("copy") 失败

    copyText()安卓,ios11,ios12都可用 ,并且不弹起输入键盘 // 复制copyText function copyText(text) { var input = document. ...

  3. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令 ...

  4. document.execCommand 常用的方法

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式: document.execCommand(sCommand[,交互方式, 动态参数]) , ...

  5. javascript的document.execCommand(转)

    document.execCommand()方法处理html数据时常用语法格式如下: 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其 中:sComm ...

  6. document.execCommand(”BackgroundImageCache”, false, true)

    很多时候我们要给一些按钮或是img设置背景,而为了达到数据与表现样式分离的效果,通常背景样式都是在CSS里设定的,但是这个行为在IE会有一 个Bug,那就是因为 IE默认情况下不缓存背景图片,所以当鼠 ...

  7. 简易博客编辑器:玩转document.execCommand命令

    xhEditor是基于jQuery开发的跨平台轻量可视化XHTML编辑器,基于LGPL开源协议发布.今天就把它山寨一下. 上几张图,看看效果: 先做出菜单部分:发现是一张背景图片,所以用图片映射的方法 ...

  8. document.execCommand()函数可用参数解析

    隐藏在暗处的方法-execCommand() 关键字: javascript document document.execCommand()方法可用来执行很多我们无法实现的操作. execComman ...

  9. 使用document.execCommand复制内容至剪贴板

    API https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 兼容性 http://caniuse.com/#se ...

随机推荐

  1. JavaScript高级程序设计:第十一章

    一.选择符API SelectorsAPILevel 1的核心是两个方法:querySelector()和querySelectorAll(). 1. querySelector()方法 queryS ...

  2. Linux中ls命令详解

    ls命令是linux下最常用的命令之一,ls跟dos下的dir命令是一样的都是用来列出目录下的文件,下面我们就来一起看看ls的用法 英文全名:List即列表的意思,当我们学习某种东西的时候要做到知其所 ...

  3. hdu_5791_Two(DP)

    题目链接:hdu_5791_Two 题意: 给你两串数列,问你相同的子序列有多少个,要注意,可以重复,比如1 和1 1 1 ,相同的子序列为3个 题解: 就和求最长公共子序列差不多,只不过要全部加起来 ...

  4. C# Memcached缓存

    net/c#分布式缓存系统Memcached简介与实践--非常好 缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是 ...

  5. ubuntu下 编译Caffe的Matlab接口

    一般情况下不愿意使用Caffe的Matlab接口,总觉得Linux版的Matlab很难配置,但是现在搞目标检测,得到的源码是使用的Caffe的Matlab接口,只能硬着头皮上了. (1)修改caffe ...

  6. c++面试题【转】

    语言部分: 虚函数,多态.这个概念几乎是必问. STL的使用和背后数据结构,vector string map set 和hash_map,hash_set 实现一个栈类,类似STL中的栈.这个题目初 ...

  7. bind启动时提示953端口被使用

    部署DNS的时候遇到个奇葩的问题,总是提示 couldn't add command channel 0.0.0.0#953: address in use 实际上系统上并没有进程使用953端口.查询 ...

  8. Linq序列间的操作

    一.Union并集操作相同的数据只显示一次 二.Concact连接 相同的数据也会重复显示 三.except差集 我有的你没有的显示 四.intersect交集相同的显示 五.zip序列的合并 六.d ...

  9. android--屏幕旋转方法总结

    在介绍之前,我们需要先了解默认情况下android屏幕旋转的机制: 默认情况下,当用户手机的重力感应器打开后,旋转屏幕方向,会导致当前activity发生onDestroy-> onCreate ...

  10. 用For Each语句对Session.Contents树组进行遍历

    <%@ LANGUAGE=VBScript codepage ="936" %> <% Option Explicit %> 您的sessionID号是:& ...