textareaを非表示にした状態で値をクリップボードコピーしたい

Question

以下の2ステップでデータをクリップボードにコピーしようとしています。
・対象クラス(tr_mk)のついたtr内のtd1つめの値をさがす
・textareaへデータを順次コピー
・textareaのデータをクリップボードにコピー

●解決したい点
上記処理自体はできました。ただし、textareaを非表示にできません。
しようとすると処理が動かなくなります。
コピー内容を画面にださずにクリップボードコピーする方法は無いのでしょうか。

$(".abtn").click(function(){
  $(".tr_mk").each(function(){
    $d=$d + $(this).children('td').eq(0).text();
  });
  $("#textArea").val($d);
  var $t=document.getElementById("textArea");
  $t.select();
  document.execCommand("copy");
});

<td><textarea id="textArea"></textarea>
<a class="abtn">コピー</a>

・上記textareaをdisplay:noneにすると要素が見えなくてコピーができない。
・input hiddenにしても表示されてしまう。
・全体構成はphp,html,css,javascriptです。

Answer 1

コピーするときだけ表示させ

  $t.style.display = 'inline-block';
  $t.select();
  document.execCommand("copy");
  $t.style.display = 'none';

念のため画面外に置いておきます。

#textArea {
  position: absolute;
  /*top: -9999px;*/
  left: -9999px;
  display: none;
}

(9/15 12:00 トップに戻る問題を受けて修正)

Comments

[entry4code]

早速ありがとうございます。
できましたが、コピーした時に隠しているテキストエリアの位置に画面がスクロールしてしまいます。例えば下にスクロールしていても、トップに戻ってしまいます。
これはどうしようもないのでしょうか。重ね重ねすみません。

[Kazuma2015]

上記の記載内容だとスクロールが確認できませんが、本処理上で<a href="#" class="abtn">コピー</a>
みたいにしていませんか？hrefを入れてしまうとページトップまでスクロールする仕様なので。

[x_x]

Chrome, IE, Fx で再現しませんでした。Kazuma2015 さんの言うようにhref属性を使っているなら preventDefault を使ってください。そもそも a 要素である必要はないかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

[entry4code]

情報ありがとうございます。

a hrefはつかっていませんでした。

また、検証したところ以下が追加で確認できました。

・.select（）を実行した時にトップに戻ってしまう。コメントアウトすると戻らない。
・コピーデータがない場合はトップに戻らない。

[x_x]

指定はleftだけでいいです。横スクロールバーが出ているときは移動するかもしれません。

[entry4code]

トップを指定しなくても戻ってしまいました。
なんとか解決できましたので解決方法欄にかきます。ありがとうございました！

Answer 2

トップに戻る問題の解決方法

・jqueryでウィンドウスクロール位置を取得
・テキストエリアのcssのトップにスクロール位置を適用
・選択、コピー

これでトップに戻らなくなりました。擬似的にテキストエリアを現在のスクロール位置にもってくるというやりかたです。

ここからは個人的な感想です。
今回なんとか解決できましたが、すごく強引なやり方になってしまいました。
クリップボードコピーくらい他のjqueryライブラリくらいかんたんに実装できたらなーというのが正直なところです。