WebShell下拷贝粘贴支持

发表于 更新于 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 2 分钟

WebShell下拷贝粘贴的支持最近遇到了问题，这里总结下

浏览器剪贴板权限

当浏览器剪贴板权限关闭的情况下，在使用Clipboard API时会报错。但由于有些用户的浏览器有安全要求，因此剪贴板权限是不打开的，那么这时WebShell还可以正常支持复制粘贴吗。答案是可以的，因为浏览器也有拷贝和粘贴支持

浏览器的拷贝粘贴

以Windows为例，拷贝是⌃+c，粘贴是⌃+v

以Mac为例，拷贝是⌘+c，粘贴是⌘+v

以上热键是固定的，即当我们唤起该组合键即可执行对应行为

虽然是这样，但该事件是可以在页面逻辑里捕获并阻止以上的缺省行为的，因此也就可能会有问题，比如windows下的xterm.js

xterm.js下的ctrl+c,ctrl+v

由于xterm.js对于按键是有监听并处理的，因此会造成该热键不work。那么如何解决呢

attachCustomKeyEventHandler方法中针对热键进行处理，返回false即可保证缺省行为继续执行

1
2
3
4
5
customKeyEventHandler – The custom KeyboardEvent handler to attach. This is a function that takes a KeyboardEvent, allowing consumers to stop propagation and/or prevent the default action. The function returns whether the event should be processed by xterm.js.


attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void;

浏览器热键支持拷贝粘贴并不能完美替代clipboard，那么clipboard不可用的情况下，还可以实现拷贝粘贴吗。

答案是一半一半

document.execCommand(‘copy’）

document对象的execCommand方法支持拷贝，所以测试下来发现，在没有clipboard支持的情况下，也可以动态拷贝指定文本到剪贴板。

但paste是不支持的，听说IE支持。当然还需注意，该API不提倡，属于老古董了。但作为兜底支持拷贝，个人觉得还不错。

写在最后

到此，拷贝粘贴使用也就这些了。

总结，除了我们使用clipboard支持之外，在没有权限的浏览器下，我们还是可以使用浏览器的默认热键实现最基本的文本选中，当然注意别阻止该行为就行了。

done.

相关文档