document.execCommand('copy') 在 Firefox 中对 codemirror textarea 字段不起作用答案

【问题标题】：document.execCommand('copy') doesn't work in firefox for codemirror textarea fielddocument.execCommand('copy') 在 Firefox 中对 codemirror textarea 字段不起作用
【发布时间】：2017-11-29 10:33:38
【问题描述】：

我正在使用带有文本区域（代码镜像）的自定义确认对话框，其中填充了一些文本。由于代码镜像隐藏了实际的 textarea 元素，firefox 无法从隐藏的 textarea 字段中获取数据。确认框的定义如下：

var confirmationDialog = MD.ui.dialogs.confirm({
    title: title,
    text: '',
    type: 'dataUri',
    dataUri: formUrl,
    position: 'center',
    buttonForward: {
        text: 'Copy',
        action: function () {
            DataGridExportDialog.CopyToClipboard("#rawXmlImpExp");
        }
    },
    buttonCancel: {
        text: 'Cancel',
        action: function () {
            confirmationDialog.close();
            confirmationDialog.destroy();
        }
    }
});

根据要求，我已使用复制到剪贴板功能更新了确认按钮功能，以便单击“复制”时，应将文本区域中的文本复制到剪贴板。下面是copyToClipboard()。

DataGridExportDialog.CopyToClipboard = function( containerId ) {
/*var textareaData = $('#rawXmlImpExp').val();
var range = document.createRange();
range.selectNodeContents(textareaData);
window.getSelection().addRange(range);*/

var copyTextarea = document.querySelector(containerId);
copyTextarea.select();

try {
    var successful = document.execCommand('copy');
    raiseMessage('Configuration XML copied to clip board.')
} catch (err) {
    raiseWarning('Unable to copy. Please do so manually.');
}}

此实现在 chrome 上运行良好，但在 Firefox 中失败。我的代码在 Firefox 上失败的任何想法。

【问题讨论】：

你试过this吗？
@RoryMcCrossan：我已经解决了这个问题，但无法将 eventListener 添加到确认按钮。如果有任何想法，请分享。
检查您的浏览器兼容性 firefox 41 及更高版本是否支持“复制/剪切”
是的，我使用的是最新的 firefox 浏览器 (57.0)。
@santoshM - 尝试一个肮脏的技巧，让它可见，但将高度和宽度设置为 0，然后尝试选择文本，看看是否有效。

标签： javascript jquery firefox

【解决方案1】：

在try块中取消隐藏textarea，在finally块中隐藏相同。

CopyToClipboard = function( containerId ) {
  const copyTextarea = $(containerId);
  try {
    $(copyTextarea).css('display','block');
    copyTextarea[0].select();
    document.execCommand('copy');
    raiseMessage('Configuration XML copied to clip board.');
  } 
  catch (err) {
    raiseWarning('Unable to copy. Please do so manually.');
  }
  finally {
    $(copyTextarea).css('display','none');
  }
}

【讨论】：