Javascript 从剪贴板获取内容 document.execCommand('Paste') 失败的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 2397 days ago, the information mentioned may be changed or developed.

<body>
<textarea Onfocus="document.execCommand('Paste')"></textarea>
</body>

帮人弄个正则匹配生成表格的小程序 ,
不想写 wpf ,
就用 html 做了 ,
body 就是这样 , 使用 file 协议访问 , chrome76 edge 都试过了 , 希望达到的效果是获取焦点时候就使用剪贴板的内容进行覆盖 , 但是始终不行 , 问题是出在哪里了呢 ?

剪贴板

body

document

textarea

11 replies 2021-01-11 09:30:47 +08:00

rogwan

Oct 12, 2019 via iPhone

浏览器为了安全，不支持 js，要用户触发。

nihiue

Oc 12, 2019 via Android

特权操作只能在特定的事件中触发，你改成 click 试试

cnanyi

Oct 12, 2019

paste 操作，只能主动触发，不能从代码调用了

raymanr

Oct 12, 2019

@nihiue
@rogwan

<button Onclick="document.querySelector('#a').focus();document.execCommand('Paste');">aaa</button>
<textarea id="a"></textarea>

这样 ? 可以获取焦点 , 但是仍然没法 paste , 可以麻烦说具体点吗 ?

codehz

Oct 12, 2019 via Android

请用新的 api https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

gIrl1990

Oct 12, 2019

@codehz 咋不行。chrome 77 Uncaught (in promise) DOMException
`navigator.clipboard.readText().then`

raymanr

Oct 12, 2019

@codehz
chrome 76
navigator.clipboard.readText().then(clipText => document.querySelector("#a").innerText = clipText).catch(err=>{console.log(err)})

抛出个没有细节的
DOMException

这个试过 , 一直不知道为何都会抛出异常 , 所以才想用 execCommand , 结果也搞不好

love

Oct 12, 2019

浏览器可以得到用户的剪贴板？那不是太搞笑了吧，比如我经常复制密码，上个网站就能偷去？

raymanr

Oct 12, 2019

@love
原来前面几位说的主动触发是这个意思么 ? 虽然 clipboard.readText() 让我也没看明白 , 不过算了.... 还是用 wpf 吧 , 太麻烦了

chosan

Jan 11, 2021

navigator.clipboard.readText() 要在 https 下才行，不然 navigator.clipboard 为 undefined，另外也不能通过在控制台执行，它需要页面为 active 状态，在控制台的时候相当于页面 deactive 了，因此可以在控制台输入以下代码，然后快速点击页面内部激活页面：

setTimeout(async () => {
const text = await navigator.clipboard.readText();
console.log(text);
}, 4000);

chosan

Jan 11, 2021

参考链接： https://web.dev/async-clipboard/