クリップボードへのコピーでinput要素を非表示にしたい

Question

特定の値をクリップボードにコピーさせるとき
input要素に値を設定して、それをJavaScriptで読み込んでコピーすると思います。

この時input要素を表示させないで、ボタンを押すだけでコピーさせることは可能でしょうか？

UI側からは、コピーボタンだけが見えててほしいです。

input要素をdisplay:none;に指定したり、typeをhiddenにするとコピーされません。

<input id="input" type="text" value="コピーする値">
<button id="copy">Copy</button>

function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copy);

入力フォームを非表示にして、値をコピーさせる方法があれば教えてください。

Comments

[m.ts10806]

非表示要素へ値はどうやっていれてるのでしょうか

[m.ts10806]

このタイトルだとコピーする→非表示にする ような印象を受けます。
実際はどうなのでしょうか。

[akomit]

説明不足ですみません。最初から非表示にしたいです。

実際はinput要素のvalueにコピーする値があります。
<input id="input" type="text" value="コピーする値">

コピーする値を保持する為にinput要素を使っていますが、
UI側から入力欄が見える必要はないので非表示にしたいです。
(ボタンだけ見えててほしいです)

[akomit]

すみません、解決いたしました！

[m.ts10806]

解決したあとでなんですが、それってinputである必要すらないのでは？buttonにdata属性仕込んで取っても良さそうですよね

[akomit]

確かにわざわざ<div>を使わなくても、buttonに直接data属性を仕込むのが簡単ですね。
ありがとうございます。

Answer 1

こんな感じではいかがですか？

function copyOverrideOnce(s){
  document.addEventListener('copy', function(e){
      e.clipboardData.setData('text/plain', s);
      e.preventDefault();
    },
    {once:true}
  );
}

function copy() {
  copyOverrideOnce('コピーさせたい値');
  document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copy);

Comments

[akomit]

ありがとうございます。

<div id="copyTarget" data-copy="コピーする値"></div>
var copy = document.getElementById("copyTarget").dataset.copy;

として、ご提示いただいた
copyOverrideOnce()にcopyを渡したら実現できました！

[akomit]

input要素を使わなくても、そのようにすればコピーさせることができるのですね。

ありがとうございました。