当 MUI 弹出框打开时，使用 textarea 和 document.execCommand('copy) 复制到剪贴板是一个问题

问题描述

打开一个 MUI 菜单 (PopOver)，其中包含“复制到剪贴板”选项的 MenuItem。 MenuItem 有一个 <IconButton>。 IconButton 的 onClick 处理程序调用 document.execCommand('copy')。

copyToClipBoard 的代码如下 参考：How do I copy to the clipboard in JavaScript?

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

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

  try {
    var successful = document.execCommand('copy');
    var 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);
}

此代码段在其他页面中完美运行，没有 React MUI 弹出窗口。但是，它从未与打开 MUI 弹出窗口的页面一起使用。

经过一些谷歌搜索，我发现弹出框是自动对焦的。 参考：Prevent auto focus of a material-ui popover element

我现在的解决方法是暂时隐藏弹出框并在将文本复制到剪贴板后重新启用它们。

const fallbackcopyTextToClipboard = text => {
  let textArea = document.createElement('textArea');
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = '0';
  textArea.style.left = '-9999'; //Hide from view
  textArea.style.position = 'fixed';
  textArea.style['z-index'] = '9999'; //Bring this infront of all possible popovers

  //This is a hack
  //Momentarily hide all popovers to give focus() to the temporary <textarea>
  const allPopOvers = document.getElementsByClassName('MuiPopover-root');
  const openPopOvers = [];
  for (let popover of allPopOvers) {
    if (popover.style.visibility !== 'hidden') {
      openPopOvers.push(popover);
      popover.style.visibility = 'hidden';
    }
  }
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  let successful = false;
  try {
    successful = document.execCommand('copy');
    //Undo the changes to visible popovers
    openPopOvers.forEach(popover => {
      popover.style.visibility = '';
    });
  } catch (err) {
    logger.error('Fallback: Oops,err);
  }

  document.body.removeChild(textArea);
  return successful;
};

如果有人遇到同样的问题，请提出对您有用的修复方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）