- Konu sahibi
- #1
JavaScript’te metni panoya kopyalamak için
Aşağıdaki örneği
Kod, metin alanının o andaki değerini alır ve düğme tıklamasının içinde panoya yazmaya çalışır.
Varsayılan metni değiştirmeden düğmeye bastıktan sonra bir metin düzenleyicisine yapıştırın:
Güvenli bağlam gereklidir: Canlı sitede HTTPS kullanın. Yerel geliştirmede
API mevcut olduğu hâlde işlem reddediliyorsa düğmeye gerçekten tıklandığını ve yazma çağrısından önce uzun süreli başka bir işlem yapılmadığını kontrol edin. Tarayıcıların kullanıcı etkileşimi ve pano izinleri konusundaki kuralları farklı olabilir. Sayfa bir
navigator.clipboard.writeText(metin) kullanın. Bu yöntemi güvenli bir sayfada, tercihen kullanıcının düğmeye tıklamasıyla çağırın ve dönen işlemin tamamlanmasını bekleyin. İşlem başarılıysa metin sistem panosuna yazılır; başarısızsa kullanıcıya metni elle kopyalama olanağı sunabilirsiniz.Çalışan bir kopyalama düğmesi oluşturun
Aşağıdaki örneği
index.html adıyla kaydedin ve HTTPS üzerinden veya yerel geliştirme sunucusunda http://localhost adresinden açın. Metin alanına kopyalamak istediğiniz içeriği yazıp Kopyala düğmesine basın.
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Panoya kopyalama örneği</title>
</head>
<body>
<label for="metin">Kopyalanacak metin:</label>
<textarea id="metin">Merhaba dünya!</textarea>
<button id="kopyala" type="button">Kopyala</button>
<p id="durum" role="status" aria-live="polite"></p>
<script>
const metinAlani = document.getElementById('metin');
const durum = document.getElementById('durum');
document.getElementById('kopyala').addEventListener('click', async () => {
durum.textContent = '';
if (!navigator.clipboard?.writeText) {
durum.textContent = 'Otomatik kopyalama kullanılamıyor. Metni seçip elle kopyalayın.';
metinAlani.focus();
metinAlani.select();
return;
}
try {
await navigator.clipboard.writeText(metinAlani.value);
durum.textContent = 'Metin panoya kopyalandı.';
} catch (hata) {
durum.textContent = 'Kopyalama başarısız. Metni seçip elle kopyalayın.';
metinAlani.focus();
metinAlani.select();
}
});
</script>
</body>
</html>Kod, metin alanının o andaki değerini alır ve düğme tıklamasının içinde panoya yazmaya çalışır.
writeText() bir Promise, yani sonucu daha sonra tamamlanan bir işlem döndürür. await işlemin tamamlanmasını bekler; başarı mesajı yalnızca bu işlem tamamlandığında gösterilir.Varsayılan metni değiştirmeden düğmeye bastıktan sonra bir metin düzenleyicisine yapıştırın:
Merhaba dünya! görünmelidir. Başarı mesajı panonun o anda güncellendiğini gösterir; içeriğin daha sonra başka bir kopyalama işlemiyle değiştirilmediğini garanti etmez. Hata mesajı çıkarsa örnek metni seçer; kullanıcı normal kopyalama kısayolunu veya cihazının kopyalama komutunu kullanabilir.Kopyalama çalışmazsa neyi kontrol etmeli?
Güvenli bağlam gereklidir: Canlı sitede HTTPS kullanın. Yerel geliştirmede
localhost genellikle güvenli kabul edilir. API kullanılamıyorsa adresi ve tarayıcı desteğini kontrol edin; yerel bir dosyayı doğrudan açmak yerine geliştirme sunucusuyla tekrar deneyin.API mevcut olduğu hâlde işlem reddediliyorsa düğmeye gerçekten tıklandığını ve yazma çağrısından önce uzun süreli başka bir işlem yapılmadığını kontrol edin. Tarayıcıların kullanıcı etkileşimi ve pano izinleri konusundaki kuralları farklı olabilir. Sayfa bir
iframe içindeyse üst sayfanın pano erişimine uyguladığı izinleri de inceleyin.document.execCommand('copy') eski bir yöntemdir; yeni uygulamalarda öncelikle Clipboard API’yi kullanın. Otomatik kopyalama desteklenmeyen veya engellenen durumlarda örnekteki gibi metnin elle seçilip kopyalanabilmesi pratik bir alternatiftir.