如何在JS中复制剪贴板中的文本 - Javascript

当用户需要复制文本时，通过JS可以实现复制的功能。JS提供了一些API，可以使用这些API从剪贴板中获取或复制文本和其它类型的数据。本文将介绍如何在Javascript中复制剪贴板中的文本。

获取剪切板中的文本

在Javascript中获取剪切板中的文本很容易，只需要使用navigator.clipboard.readText()函数即可。该函数返回一个Promise对象，当Promise状态变为fulfilled时，可以接收到剪切板中的文本。

navigator.clipboard.readText()
  .then(text => {
    console.log('Clipboard contains:', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

复制文本到剪切板

复制文本到剪切板需要调用navigator.clipboard.writeText()函数。同样地，该函数返回一个Promise对象，当Promise状态为fulfilled时表示剪切板已经包含了复制的文本。

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log(`Text copied to clipboard: "${text}"`);
    })
    .catch((err) => {
      console.error('Failed to copy text: ', err);
    });
}

const textToCopy = 'Hello, world!';
copyToClipboard(textToCopy);

与兼容性问题的处理

虽然上面给出的两个函数可以很好地复制和获取剪切板中的文本，但在某些老版本的浏览器中，这两个函数可能不起作用。为了在低版本浏览器中实现此功能，我们可以使用document.execCommand()函数来模拟复制和获取剪切板中的文本。

const fallbackCopyToClipboard = (text) => {
  const textArea = document.createElement('textarea');
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.position = 'fixed';
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = '0';
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? 'successful' : 'unsuccessful';
    console.log(`Fallback: Copying text command was ${msg}`);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}

const fallbackCopyFromClipboard = () => {
  const textArea = document.createElement('textarea');

  // Avoid scrolling to bottom
  textArea.style.position = 'fixed';
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = '0';
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';

  document.body.appendChild(textArea);
  textArea.focus();

  try {
    const successful = document.execCommand('paste');
    const msg = successful ? 'successful' : 'unsuccessful';
    console.log(`Fallback: Pasting text command was ${msg}`);
  } catch (err) {
    console.error('Fallback: Oops, unable to paste', err);
  }

  const text = textArea.value;
  document.body.removeChild(textArea);
  return text;
}

这里，我们使用document.createElement('textarea')创建一个不可见的文本框，将文本粘贴到该文本框中，使用document.execCommand()执行复制和粘贴操作。而注意，尽管这些函数能够在低版本浏览器中正常工作，但这些API在较新的浏览器版本中被废弃，在使用时还是需要小心谨慎。

结论

在JS中，我们可以通过几行代码实现复制文本到剪切板或从剪切板中读取文本，但由于一些兼容性问题，需要注意处理。