كيفية لصق النص

هاري ثيودولو
هاري ثيودولو
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

المصدر

الطريقة الكلاسيكية

جارٍ استخدام 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);
  }
});