最初のカット

…から続く背景の物語を開始します.
少し前に、私は私が使用するウェブサイトにコピーボタンを加えました.目標はHTMLの要素をコピーすることであり、特に特定の小さなテーブルのテーブル、一般的に小さいが、かなり大きく、電子メールで使用するクリップボードにコピーすることでした.

レガシーソリューション👴: 選択とコピー
最初にオプションを研究するとき、私はR BrewerでStack Overflowによって発表される単純な解決を実行しました.
それはHTML要素を選択するための document.createRange と Range.selectNodeContents() を使用し、それからクリップボードにコピーするために document.execCommand('copy') を使用します.
完全解は少し言い換えられ、ここで再現されます.

function copyElementToClipboard(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    document.execCommand("Copy");
}

そのような作品.まあ十分なので、私は公正な時間のためにそれに立ち往生.

遺産問題:それはすべてのバラではない...🌹🌹
この解決策は、実際に多くの問題を有する.彼らは、しばらくの間、すべてのことに耐えられていました.

Firefoxは、プロセスのスタイルの多くを失う.具体的に、私に顕著に、テーブル行の色.すべての色が失われます.クロムは対照的にそれらを尊重し、コピーの色を保存します.ここで回避策は、ちょうどクロムやクロムを使用してメールを準備し、罰金だった.そして、すべてはよかったです.

選択が見える.それはとても不器用で醜いので、行かなければならなかった.修正は難しくありません、基本的に、要素はコピーされます、そして、それからスクリーンとその要素が選ばれたので、選択が起こるとき、見えません.きちんとしたトリック.実装されている解決策は以下のようになりました.

function selectElementContents(el) {
      let body = document.body, range, sel;
      if (document.createRange && window.getSelection) {
          range = document.createRange();
          sel = window.getSelection();
          sel.removeAllRanges();
          try {
              range.selectNodeContents(el);
              sel.addRange(range);
          } catch (e) {
              range.selectNode(el);
              sel.addRange(range);
          }
      } else if (body.createTextRange) {
          range = body.createTextRange();
          range.moveToElementText(el);
          range.select();
      }
}

function copyElementToClipboard(element) {
       let el = element.cloneNode(true);
       el.setAttribute('readonly', '');
       el.style = {position: 'absolute', left: '-9999px'};
       document.body.appendChild(el);
       selectElementContents(el);
       document.execCommand('copy');
       document.body.removeChild(el);
}  

これは1つの注意を運びました、そして、それは私を冷笑させて、同時に笑いました.Firefoxは、実際に位置決めスタイルを尊重クロムはなかった.彼らの行動の特異性の完全な逆転.しかし、Firefoxのコピーは、すべての色を失っただけでなく、ページの左側にオフに配置され、それが見えなかった電子メールに貼り付けられた(私は電子メールのHTMLソースを見ていない限り-何が起こっているかを確認するために必要).
いいえ、私は考えました.私はちょうどdivにそれを包みました.そして、それは位置しました、そして、私はdiv自体でなく、divの内部で要素をコピーしました.しかし、Firefoxは私にとってはあまりにもスマートで、まだ貼り付けられたとき(左からラップされたdivから)、スクリーンを左から左に配置しました.気にしないで、クロムはうまくいきました.
そして、それは長い間の解決策でした.私は、ちょうどこれらのテーブルをコピーするために、クロムを使いました.

壊れた遺産:1つの藁が多すぎる.🐪

そして、ある日、私は最終的にサイトの色管理を簡素化して、集中させたかったので、すべてのCSSカラースタイル値をCSS variablesに吸い込みました.そして、突然、色は私のクロムコピーからすべて消えました.
ああピッフル!

それで、フィックスの狩りを始めました.どのように、ああ、これを修正するには?CSSの変数をサポートするための欲求は、選択のトリックを失うことを望んでいたと何かを少しより多くのハックとより滑らかです.
ステップ1では、クリップボードにデータを取得するオプションを調べます.