Javascript 无法从开发者控制台使用 `document.execCommand('copy');`
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33321095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot use `document.execCommand('copy');` from developer console
提问by Domi
Calling document.execCommand('copy');from the Chrome developer console returns false
every time.
调用document.execCommand('copy'); Chrome 开发者控制台false
每次都会返回。
Give it a try yourself. Open the console and run it, it never succeeds.
自己试试吧。打开控制台并运行它,它永远不会成功。
Any idea as to why?
知道为什么吗?
回答by Julien Grégtheitroade
document.execCommand('copy')
must be triggered by the user. It's not only from the console, it's anywhere that's not inside an event triggered by the user. See below, the click event will return true, but a call without event won't and a call in a dispatched event also.
document.execCommand('copy')
必须由用户触发。它不仅来自控制台,还可以出现在用户触发的事件之外的任何地方。见下文,click 事件将返回 true,但没有事件的调用不会,并且调度事件中的调用也不会。
console.log('no event', document.execCommand('bold'));
document.getElementById('test').addEventListener('click', function(){
console.log('user click', document.execCommand('copy'));
});
document.getElementById('test').addEventListener('fakeclick', function(){
console.log('fake click', document.execCommand('copy'));
});
var event = new Event('fakeclick')
document.getElementById('test').dispatchEvent(event) ;
<div id="test">click</ha>
See here:https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command
见这里:https: //w3c.github.io/editing/execCommand.html#dfn-the-copy-command
Copy commands triggered from document.execCommand() will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. How implementations can be configured to allow write access to the clipboard is outside the scope of this specification.
从 document.execCommand() 触发的复制命令只会影响真实剪贴板的内容,如果事件是从用户信任和触发的事件中调度的,或者实现配置为允许这样做。如何配置实现以允许对剪贴板的写访问超出了本规范的范围。
回答by gilly3
As an alternative, use the copy()
command that is built in to the Chrome Dev tools. You can't use document.execCommand("copy")
because that requires user action to trigger it.
或者,使用copy()
Chrome 开发工具内置的命令。您不能使用,document.execCommand("copy")
因为这需要用户操作来触发它。
The copy()
command allows you to copy any string (or object as JSON). To emulate document.execCommand("copy")
you can get the current selection with getSelection().toString()
:
该copy()
命令允许您复制任何字符串(或对象为 JSON)。要模拟,document.execCommand("copy")
您可以使用以下命令获取当前选择getSelection().toString()
:
copy(getSelection().toString())
If you need to actually test document.execCommand("copy")
specifically (for example, to debug a script that uses it), and using the debugger isn't ideal for some reason, you can wrap your code in a click handler, and then click your page:
如果您需要document.execCommand("copy")
专门进行实际测试(例如,调试使用它的脚本),并且由于某种原因使用调试器并不理想,您可以将代码包装在点击处理程序中,然后点击您的页面:
document.body.addEventListener("click", function() {
console.log("copy", document.execCommand("copy"));
}, false);
回答by Praveen Kumar Purushothaman
I believe, copy
command requires to be having the focus on the browser, and when you go to Console and execute the command, the current window loses focus. But could be other reasons, as it worked if I give in setTimeout()
.
我相信,copy
命令需要将焦点放在浏览器上,当您转到控制台并执行命令时,当前窗口会失去焦点。但可能是其他原因,因为如果我屈服,它会起作用setTimeout()
。
回答by div-wang
This method works in the latest version of safari
此方法适用于最新版本的 safari
const copyUrl = (url, cb) => {
try {
var input = document.getElementById('copyInput')
input.value = url
input.focus()
input.select()
if (document.execCommand('copy', false, null)) {
Message('复制成功')
} else {
Message({
message: '当前浏览器不支持复制操作,请使用Ctrl+c手动复制',
type: 'warning'
})
}
} catch (e) {
Message({
message: `复制出错:${e}`,
type: 'error'
})
}
}