HTML Panoya Kopyalama Yapmak
-
12 Haziran • 5 dakikalık okuma
Html sayfasındaki yazı yada istenilen bir değer, butona tıklanarak JavaScript kodu ile panoya kopyalanabilir;
JavaScript kodu ile panoya kopyalama yapabilmek için iki yöntem bulunur; clipboard API writeText metodu ve execCommand metodudur.
İlk yöntem olan clipboard API yöntemini kullanabilmek için sitenin güvenli https bağlantısı ile çalışması gerekmektedir. İkinci yöntem, sayfada gizli bir yazı alanı oluşturup istenen değeri içine yazdırmak ve yazıyı seçip kopyala komutu vermek şeklindedir.
Kod
<body>
<span id="value">http://www.melihsafran.com/blog/html-panoya-kopyalama-yapmak</span>
<button id="copy-to-clipboard" style="width: 120px;" onclick="return copyValue('value', this, 600)">
📋 Kopyala
</button>
</body>
İki yöntemi birleştirip clipboard API yönteminin çalışmadığı durumda diğer yöntem ile kopyalama yapılabilir;
Kod
<script>
async function copyToClipboard(textToCopy)
{
let errorOccured = false;
// Navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext)
{
try
{
console.log('writeText yöntemi ile');
await navigator.clipboard.writeText(textToCopy);
}
catch (e)
{
console.error(e);
errorOccured = true;
}
}
else
{
// Use the 'out of viewport hidden text area' trick
console.log('execCommand yöntemi ile');
try
{
const textArea = document.createElement('textarea');
textArea.value = textToCopy;
// Move textarea out of the viewport so it's not visible
textArea.style.position = 'absolute';
textArea.style.left = '-999999px';
document.body.prepend(textArea);
textArea.select();
document.execCommand('copy');
}
catch (e)
{
console.error(e);
errorOccured = true;
}
finally
{
textArea.remove();
}
}
return !errorOccured;
}
async function copyValue(id, button, resultDuration)
{
const value = document.getElementById(id).innerText;
console.log('Kopyalanacak değer', value);
try
{
const result = await copyToClipboard(value);
if (result)
{
console.log('Değer panoya kopyalandı: ', value);
button.innerText = '✔️ Kopyalandı!';
}
else
{
console.log('Hata: Değer panoya kopyalanamadı: ', value);
button.innerText = '❌ Kopyalanamadı!';
}
setTimeout(function() {
button.innerText = '📋 Kopyala';
}, resultDuration);
}
catch (e)
{
console.error(e);
}
return false;
}
</script>
Kaynaklar
- How do I copy to the clipboard in JavaScript? , stackoverflow.com, 12.06.2024 tarihinde alındı.
- navigator.clipboard is undefined , stackoverflow.com, 12.06.2024 tarihinde alındı.
Beğen