作为我们努力发展 Web 平台并使其可供新设备访问的一部分,我们正在努力减少 Web 对 Flash 的依赖。作为该努力的一部分,我们正在标准化并公开目前仅对 Flash 可用的有用功能,使其可供整个 Web 平台使用。
许多网站仍然使用 Flash 的原因之一是其复制和剪切剪贴板 API。Flash 公开了用于在按钮按下时以编程方式将文本复制到用户剪贴板的 API。这已用于实现一些方便的功能,例如 GitHub 的“克隆 URL”按钮。它也适用于编辑器 UI 等内容,这些 UI 想要公开用于复制到剪贴板的按钮,而不是要求用户使用键盘快捷键或上下文菜单。
不幸的是,Web API 尚未提供通过 JavaScript 将文本复制到剪贴板的功能,这就是为什么在禁用 Flash 的情况下访问 GitHub 会显示一个丑陋的灰色框,而该按钮应该位于该位置。幸运的是,我们有一个解决方案。编辑器 API 提供 document.execCommand
作为执行编辑器命令的入口点。"copy"
和 cut"
命令以前已对网页禁用,但 Firefox 41(目前处于 Beta 版,计划于 9 月中旬发布)将使其在用户操作触发的回调中可供 JavaScript 使用。
使用 execCommand("cut"/"copy")
execCommand("cut"/"copy")
API 仅在用户触发的回调(如单击)期间可用。如果您尝试在其他时间调用它,execCommand
将返回 false
,这意味着该命令无法执行。运行 execCommand("cut")
将把当前选择复制到剪贴板,因此让我们来实现一个基本的复制到剪贴板按钮。
<pre>// 我们要附加事件的按钮
var button = ...;
// 包含我们想要复制的文本的输入
var input = ...;
button.addEventListener("click", function(event) {
event.preventDefault();
// 选择输入节点的内容
input.select();
// 复制到剪贴板
document.execCommand("copy");
});</pre>
该代码将在 Firefox 41 及更高版本中,在单击按钮时触发将输入中的文本复制到剪贴板。但是,您可能还想处理失败情况,可能回退到其他基于 Flash 的方法,例如 ZeroClipboard,甚至只是告诉用户他们的浏览器不支持该功能。
如果操作失败,例如由于在用户触发的回调之外调用,execCommand
方法将返回 false,但在旧版本的 Firefox 中,如果尝试使用 "cut"
或 "copy"
API,我们也会抛出安全异常。因此,如果您想确保捕获所有失败,请确保将调用包含在 try-catch 块中,并将异常解释为失败。
<pre>// 我们要附加事件的按钮
var button = ...;
// 包含我们想要复制的文本的输入
var input = ...;
button.addEventListener("click", function(event) {
event.preventDefault();
input.select(); // 选择输入节点的内容
var succeeded;
try {
// 复制到剪贴板
succeeded = document.execCommand("copy");
} catch (e) {
succeeded = false;
}
if (succeeded) {
// 复制成功!
} else {
// 复制失败 :(
}
});</pre>
"cut"
API 也通过相同的机制公开给网页,因此只需 s/copy/cut/
,您就可以开始使用!
功能测试
编辑器 API 提供了一个方法 document.queryCommandSupported("copy")
,旨在允许 API 使用者确定浏览器是否支持某个命令。不幸的是,在早于 41 的 Firefox 版本中,我们从 document.queryCommandSupported("copy")
返回 true
,即使网页实际上无法执行复制操作。但是,尝试执行 document.execCommand("copy")
将抛出 SecurityException
。因此,尝试在加载时复制并检查此异常可能是检测 Firefox 中对 document.execCommand("copy")
支持的最简单方法。
<pre>var supported = document.queryCommandSupported("copy");
if (supported) {
// 检查浏览器是否不是 41 之前的 Firefox
try {
document.execCommand("copy");
} catch (e) {
supported = false;
}
}
if (!supported) {
// 回退到其他方法,例如 ZeroClipboard
}</pre>
其他浏览器中的支持
Google Chrome 和 Internet Explorer 也都支持此 API。Chrome 使用与 Firefox 相同的限制(必须在用户触发的回调中运行)。Internet Explorer 允许在任何时候调用它,但它会首先提示用户一个对话框,询问他们是否允许访问剪贴板。
有关 API 和浏览器支持的更多信息,请参阅 MDN 文档,了解 document.execCommand().
24 条评论