🏠 Copy/Paste/Cut to Clipboard

Biz ko'p foydalanadigan matn'ni nusxalash tugmasi (button) qanday qilinadi ?

Hozirgi yangi browser'larda matn'ni nusxalash uchun Asynchronous Clipboard API'dan foydalanish osonroq

Eski brauzerlarga ham qo'llab-quvvatlash kerak bo'lsa, boshqa yo'llardan foydalangan yaxshiroq, ammo u yo'l biroz murakkab

Asynchronous Clipboard API - clipboard buyruqlariga javob berish imkonini beradi. Masalan: matn'ni qirqib olish, nusqalash va matn'ni joylashtirish (cut, copy vs paste)

*Copy

Nusxalashdan oldin, browser Clipboard API'ni qo'llab-quvvatlaydimi yo'qmi tekshirish kerak
if (navigator && navigator.clipboard && navigator.clipboard.writeText) return 'true'

Matn'ni nusxalash uchun
navigator.clipboard.writeText("Selected Text");

To'liq kod:
const copyToClipboard = str => {
if (navigator && navigator.clipboard)
return navigator.clipboard.writeText(str);
return Promise.reject('API is not available.');
};

str - nusxalash kerak bo'lgan matn

*Paste

Matn'ni paste qilish uchun .readText() funksiyadan foydalanamiz
navigator.clipboard.readText()

Matn'ni joylashtirish uchun, joylashtirmoqchi bo'lgan input yoki textarea'ga navigator.clipboard.readText() Promise qaytargandan keyin .value qilib joylaymiz.

Masalan:
navigator.clipboard
.readText()
.then(text=>{document.getElementById('outputText').value = text})

*Cut

Matn'ni qirqish uchun .writeText() funksiya'dan foydalanamiz
navigator.clipboard
.writeText(textToCut)
.then(() => { inputField.value = '' })

textToCut - matn

Tekshirish uchun: clipboard-operations.vercel.app

🔗 https://www.30secondsofcode.org/js/s/copy-text-to-clipboard/#the-asynchronous-clipboard-api

#javascript #clipboard

💠 @JasXDev