نحوه چسباندن متن

Harry Theodoulou
LinkedIn

روش مدرن

با استفاده از Async Clipboard API

برای خواندن متن از کلیپ بورد کاربر به صورت برنامه ریزی شده، به عنوان مثال، پس از کلیک روی دکمه، می توانید از متد readText() API Async Clipboard استفاده کنید. اگر مجوز خواندن کلیپ بورد هنوز اعطا نشده باشد، فراخوانی navigator.clipboard.readText() آن را در اولین فراخوانی متد درخواست می کند.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

پشتیبانی مرورگر

  • 66
  • 79
  • 13.1

منبع

روش کلاسیک

با استفاده از document.execCommand()

با استفاده از document.execCommand('paste') می توانید محتوای کلیپ بورد را در نقطه درج (عنصر HTML متمرکز فعلی) جایگذاری کنید. متد execCommand یک بولین را برمی گرداند که نشان می دهد آیا رویداد paste موفقیت آمیز بوده است یا خیر. با این حال، این روش با محدودیت هایی همراه است، برای مثال به دلیل همزمان بودن آن، چسباندن مقادیر زیادی داده می تواند صفحه را مسدود کند.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

پشتیبانی مرورگر

  • 1
  • 12
  • 1
  • 1.3

منبع

افزایش پیشرونده

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

بیشتر خواندن

نسخه ی نمایشی

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 paste text</title>
  </head>
  <body>
    <h1>How to paste text</h1>
    <p>
      <button type="button">Paste</button>
    </p>
    <textarea></textarea>
  </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 pasteButton = document.querySelector('button');

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText()
    document.querySelector('textarea').value += text;
    console.log('Text pasted.');
  } catch (error) {
    console.log('Failed to read clipboard. Using execCommand instead.');
    document.querySelector('textarea').focus();
    const result = document.execCommand('paste')
    console.log('document.execCommand result: ', result);
  }
});