Cắt và dán văn bản là một trong những tính năng được sử dụng phổ biến nhất của ứng dụng nói chung và ứng dụng dành cho máy tính để bàn nói riêng. Làm cách nào để sao chép văn bản trên web? Có cả cách cũ và cách mới. Và phụ thuộc vào trình duyệt nào được sử dụng.
Phong cách hiện đại
Sử dụng API Bảng nhớ tạm không đồng bộ
Phương thức Clipboard.writeText()
lấy một chuỗi và trả về một Hứa hẹn sẽ phân giải khi văn bản được ghi thành công vào bảng nhớ tạm. Chỉ có thể sử dụng Clipboard.writeText()
từ đối tượng window
có tâm điểm.
Cách cổ điển
Sử dụng document.execCommand()
Việc gọi document.execCommand('copy')
sẽ trả về một giá trị boolean cho biết bản sao có thành công hay không. Hãy gọi lệnh này bên trong một cử chỉ của người dùng, chẳng hạn như trình xử lý lượt nhấp. Phương pháp này có một số điểm hạn chế so với API bảng nhớ tạm không đồng bộ. Phương thức execCommand()
chỉ hoạt động với các phần tử DOM. Vì tính đồng bộ nên việc sao chép một lượng lớn dữ liệu, đặc biệt là những dữ liệu phải được chuyển đổi hoặc dọn dẹp theo một cách nào đó, có thể chặn trang.
Nâng cao dần dần
const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');
if ('clipboard' in navigator) {
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(out.value)
.then(() => {
console.log('Text copied');
})
.catch((err) => console.error(err.name, err.message));
});
} else {
copyButton.addEventListener('click', () => {
const textArea = document.createElement('textarea');
textArea.value = out.value;
textArea.style.opacity = 0;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const success = document.execCommand('copy');
console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
} catch (err) {
console.error(err.name, err.message);
}
document.body.removeChild(textArea);
});
}
Tài liệu đọc thêm
- Bỏ chặn quyền truy cập vào bảng nhớ tạm (theo cách hiện đại)
- Lệnh cắt và sao chép (cách cổ điển)
Bản minh họa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title>How to copy text</title>
</head>
<body>
<h1>How to copy text</h1>
<textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
>
<button type="button">Copy</button>
</body>
</html>
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
button {
display: block;
}
const textarea = document.querySelector('textarea');
const button = document.querySelector('button');
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(textarea.value);
} catch (err) {
console.error(err.name, err.message);
}
});