איך להעתיק טקסט

ג'ו מדלי
ג'ו מדלי
Twitter ב-GitHub

גזירה והדבקה של טקסט היא אחת התכונות הנפוצות ביותר באפליקציות באופן כללי ובאפליקציות למחשבים שולחניים בפרט. איך מעתיקים טקסט באינטרנט? יש דרך ישנה ודרך חדשה. וזה תלוי בדפדפן שבו משתמשים.

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

באמצעות Async Clipboard API

השיטה Clipboard.writeText() לוקחת מחרוזת ומחזירה הבטחה שקובעת מתי הטקסט נכתב בהצלחה בלוח. ניתן להשתמש ברכיב Clipboard.writeText() רק מתוך אובייקט window שבו יש מיקוד.

תמיכה בדפדפן

  • 66
  • 79
  • 63
  • 13.1

מקור

הדרך הקלאסית

document.execCommand() בשימוש

קריאה ל-document.execCommand('copy') מחזירה ערך בוליאני שמציין אם ההעתקה הצליחה. צריך להפעיל את הפקודה הזו בתוך תנועת משתמש, כמו מקש handler של לחיצה. לגישה הזו יש מגבלות בהשוואה ל-Async Clipboard API. השיטה execCommand() פועלת רק עם רכיבי DOM. מכיוון שזו פעולה סינכרונית, העתקה של כמויות גדולות של נתונים, במיוחד נתונים שצריכים לעבור טרנספורמציה או ניקיון בדרך כלשהי, עלולה לחסום את הדף.

תמיכה בדפדפן

  • 1
  • 12
  • 1
  • 1.3

מקור

שיפור הדרגתי

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

קריאה נוספת

הדגמה (דמו)

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 copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </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 textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});