Simple navigator.clipboard.writeText()不起作用

Question

我使用的是MacBook，我有一个复制按钮，用于复制文本字段中生成的文本输入。

这是代码:

document.querySelector("#btnCopy").addEventListener('click', copy);
async function copy(){

var text = document.querySelector("#docNumber");
text.select();
navigator.clipboard.writeText(text.value)
}

当我检查剪贴板时，没有任何内容被复制。

知道是怎么回事吗?

谢谢,社区。

Answer 1

以下方法适用于Chrome, Firefox, Internet Explorer和Edge以及最新版本的Safari(在2016年10月发布的版本10中添加了复制支持)。

document.querySelector("#btnCopy").addEventListener('click', copyToClipboard);
function copyToClipboard() {
let text = document.querySelector("#docNumber");
text.select();
text = text.value;
if (window.clipboardData && window.clipboardData.setData) {
// IE: prevent textarea being shown while dialog is visible
return window.clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && 
document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
// Prevent scrolling to bottom of page in MS Edge
textarea.style.position = "fixed";
document.body.appendChild(textarea);
textarea.select();
try {
// Security exception may be thrown by some browsers
return document.execCommand("copy");
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
}

<input id="docNumber" type="text" value="Clipboard text test">
<button id="btnCopy">Copy to Clipboard</button>

参考:

• 如何在JavaScript中复制到剪贴板?

Answer 2

我认为你需要给选定的文本赋值。

let t = text.select();

或者更好:

navigator.clipboard.writeText(text.select())