‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

Joe Medley

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

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

שימוש ב-Async Clipboard API

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

Browser Support

Source

הדרך הקלאסית

שימוש ב-`document.execCommand()`

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

Browser Support

Source

שיפור הדרגתי

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

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