从剪切板到execCommand
前言
由于明天要早起,今天就不继续设计模式的学习,总结一些今天工作时候学到的东西。
从剪切板开始
由于需要做一个API管理系统,因此需要能够双击自动复制到剪切板的交互功能。
因为之前在博客园看到了类似效果,觉得应该是api直接能用,于是我直接找到了html5 clipboardData.
但是在chrome下无法使用,但是用了网上直接window.clipboardData.setData或者getData的用法发现是无法正常运行,后来看到只在IE下支持,chrome因为安全原因不允许。(后面会具体提到) 然后我就想应该有脱离api的方法,因此我就重新翻了博客园的内容,但是我发现它是一种另类的做法,它是打开一个窗口,然后自己全选文本,然后提示你ctrl+c。这不是我想要的效果。因此直接去stackoverflow上学习新姿势。
后来发现已经有人用原生的来实现了。我们来看下他怎么写的:
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//首先创建一个textarea
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
//把它隐藏起来
textArea.style.width = '2em';
textArea.style.height = '2em';
//同时需要把padding给去掉
textArea.style.padding = 0;
// 去除Border
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// 防止闪现白色盒子
textArea.style.background = 'transparent';
//把传过来的内容赋值给textarea
textArea.value = text;
//将其添加到页面
document.body.appendChild(textArea);
//选中所有文本
textArea.select();
try {
//这句最关键,将内容赋值给copy操作
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
// console.log('Copying text command was ' + msg);
} catch (err) {
// console.log('Oops, unable to copy');
}
//用完就删
document.body.removeChild(textArea);
}
然后我们直接在所需双击事件中把内容传过来
copyTextToClipboard(event.target.attributes.url.value);
这样就成了。
但是,如果只追求需求实现那无法加深学习,因此我们需要进行原理探究。
从上面看到 document.execCommand 主要是这句达到了复制到系统剪切板的功能。我们去mdn看看。
document.execCommand
当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable,通过执行execCommand 方法可以对当前活动元素进行很多操作。
使用语法如下:
execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
我们可以看到关键参数
copy
把当前选中区域复制到系统剪贴板。使用这个命令需要首先在 user.js 接口中进行激活。
createLink
当有选中区域的时候,使用这个命令转化选中区域为一个锚点,需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符,空白字符也可。(Internet Explorer 会创建一个URI为空的a标签)
cut
剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。
delete
删除当前选中区域
enableInlineTableEditing
开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)
enableObjectResizing
开启或禁用图片或者其他可resize元素的resize功能 ( Internet Explorer不支持)
paste
在选区或者插入点粘贴剪切板中的文字。(会替换当前选区的文本)。需要在user.js中打开剪切板功能。
这时候我才惊觉这是当初写富文本编辑器那玩意儿啊-0-
而且mdn给出了codepen上的使用例子. 点这里
关于chrome对clipboardData的支持情况,我们可以去 CanIUse 里看到详细信息
Does not support the ClipboardEvent constructor
Supports cut & copy events without a focused editable field, but does not fire paste with document.execCommand('paste')
看来果然如此,只能通过execCommand来委婉达到复制粘贴动作。
今天就到这里。