在JavaScript中实现复制粘贴功能,通常会涉及到document.execCommand
方法或者现代浏览器提供的Clipboard API
。
复制(Copy):将选定的内容复制到剪贴板,但不删除原内容。 粘贴(Paste):从剪贴板取出内容并放置到当前焦点所在的位置。
document.execCommand
这是一个较老的方法,但在一些浏览器中仍然有效。
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy', err);
}
document.body.removeChild(textarea);
}
// 使用
copyToClipboard('要复制的文本');
Clipboard API
这是一个更现代、更安全的方法,但需要用户的交互(如点击事件)来触发。
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
// 使用
document.getElementById('copyButton').addEventListener('click', function() {
copyToClipboard('要复制的文本');
});
Clipboard API
时,需要注意浏览器的权限设置。在某些情况下,浏览器可能会要求用户授予权限才能访问剪贴板。Clipboard API
是现代浏览器支持的标准方式,但仍然需要考虑不支持该API的旧版浏览器。可以使用document.execCommand
作为回退方案。