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

هری تئودولو

روش مدرن

استفاده از API کلیپ‌بورد ناهمگام

برای خواندن متن از کلیپ‌بورد کاربر به صورت برنامه‌نویسی شده، برای مثال، پس از کلیک روی یک دکمه، می‌توانید از متد readText() از API کلیپ‌بورد Async استفاده کنید. اگر هنوز مجوزهای خواندن کلیپ‌بورد اعطا نشده باشد، فراخوانی 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');
   }
});

Browser Support

  • کروم: ۶۶.
  • لبه: ۷۹.
  • فایرفاکس: ۱۲۵.
  • سافاری: ۱۳.۱.

Source

روش کلاسیک

استفاده از 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);
})

Browser Support

  • کروم: ۱.
  • لبه: ۱۲.
  • فایرفاکس: ۶۹.
  • سافاری: ۱.۳.

Source

بهبود تدریجی 

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);
   }
});

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!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>

سی اس اس 


        :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;
}

جی‌اس 


        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);
  }
});