const oInput = document.createElement('input');
oInput.value = content;
oInput.readOnly = 'readOnly';
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand('Copy');
document.body.removeChild(oInput);
oInput.blur();
复制操作最好放在事件监听函数里面,由用户触发(比如用户点击按钮)。如果脚本自主执行,某些浏览器可能会报错,当如果使用 document.execCommand('Copy')返回是false的话,可能就是因为复制操作在回调函数中,此时,如果需要进行一些请求后在进行复制操作的
话,就需要 ------navigator.clipboard----------
navigator.clipboard
在 Chrome 的 DevTools 控制台下执行 navigator.clipboard 返回 undefined,是因为浏览器禁用了非安全域的 navigator.clipboard 对象,
只有安全域包括本地访问与开启TLS安全认证的地址,如 https 协议的地址、127.0.0.1 或 localhost ,才可以使用 。
整合一下
// 当document.execCommand 不能使用时切换成clipboard
copyToClipboard = (content, message) => {
// navigator clipboard 需要https等安全上下文
if (navigator.clipboard && window.isSecureContext) {
// navigator clipboard 向剪贴板写文本
navigator.clipboard.writeText(content).then((_) => {
alert(message);
});
} else {
const oInput = document.createElement('textarea');
oInput.value = content;
oInput.readOnly = 'readOnly';
document.body.appendChild(oInput);
oInput.select(); // 选择对象
// console.log(document.execCommand('copy'), 'execCommand');
if (document.execCommand('copy')) {
document.execCommand('copy');
}
oInput.blur();
document.body.removeChild(oInput);
alert(message);
}
}