איך להדביק טקסט

הארי תאודולו
הארי תאודולו
Twitter דף הבית

הדרך המודרנית

באמצעות Async Clipboard API

כדי לקרוא טקסט מלוח העריכה של המשתמש באופן פרוגרמטי, לדוגמה, אחרי לחיצה על לחצן, אפשר להשתמש בשיטה readText() של Async Clipboard API. אם עדיין לא נתת הרשאת קריאה ללוח, הקריאה ל-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
  • x
  • 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);
  }
});