🏠 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