Metin kesme ve yapıştırma, genel olarak uygulamaların ve özellikle de masaüstü uygulamalarının en sık kullanılan özelliklerinden biridir. Web'de nasıl metin kopyalarım? Hem eski hem de yeni bir yöntem var. Bu, hangi tarayıcının kullanıldığına bağlıdır.
Modern yöntem
Async Clipboard API'yi kullanma
Clipboard.writeText()
yöntemi bir dizeyi alır ve metin panoya başarıyla yazıldığında çözümlenen bir Promise döndürür. Clipboard.writeText()
, yalnızca odağın bulunduğu window
nesnesinden kullanılabilir.
Klasik yöntem
document.execCommand()
kullanılıyor
document.execCommand('copy')
çağrılması, kopyalamanın başarılı olup olmadığını gösteren bir boole değeri döndürür. Bu komutu, tıklama işleyici gibi bir kullanıcı hareketinin içinde çağırın. Async Clipboard API ile karşılaştırıldığında bu yaklaşımda sınırlamalar söz konusudur. execCommand()
yöntemi yalnızca DOM öğeleriyle çalışır. Eşzamanlı olduğundan, büyük miktarda verinin, özellikle de bir şekilde dönüştürülmesi veya temizlenmesi gereken verilerin kopyalanması sayfayı engelleyebilir.
Progresif geliştirme
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);
});
}
Daha fazla bilgi
- Pano erişiminin engellemesini kaldırma (modern yöntem)
- Komutları kesme ve kopyalama (klasik yöntemler)
Demo
HTML
<!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>
CSS
: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;
}
JS
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);
}
});