web-dev-qa-db-ja.com

execCommand（Javascript）を使用して隠しテキストをクリップボードにコピーする

Flashを使用せずにクリップボードにコピーしようとしていますが、ブラウザがjavascriptアプローチと互換性がない場合は、 ZeroClipboard を使用してFlashにフォールバックする予定です。

次のようなボタンのonClickリスナーがあります。

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
}

入力フィールドは次のとおりです。

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/>

現在、これは期待どおりに機能しますが、設計では、コピーするテキストを含むフィールドが非表示であることが必要です。 type="hidden"とstyle="display: none"の両方を設定しようとしましたが、どちらも成功しませんでした。どちらの場合も、ボタンがページ全体を選択し、コンテンツ全体をユーザーのクリップボードにコピーします。
原因はブラウザベースではないが、念のため、Mac OS X 10.10.4でChrome（バージョン43.0.2357.134（64ビット））でテストしています。

<input>を非表示にしながら表示する機能を維持する方法はありますか？または私が取ることができる代替ルートではない場合は？

私は似たような質問を知っていますが、どれも私の問題に対処するものではありません。古すぎる、実際にJavascriptを使用していない、特定のシナリオに適合していないなどです。 これは良い答えです 同様の、より具体的でない問題を抱えている人のために。

javascriptjqueryhtmlclipboard
34
Aaron Critchley

- 更新 -

Document.execCommand（）

[1] Firefox 41より前は、user.js設定ファイルでクリップボード機能を有効にする必要がありました。 Mozilla設定の詳細 の簡単なガイドをご覧ください。コマンドがサポートされていないか有効になっていない場合、execCommandはfalseを返す代わりに例外を発生させていました。Firefox41以降では、ウィンドウをポップアップできるイベントハンドラーでクリップボード機能がデフォルトで有効になっています（半信頼スクリプト） ）。

Firefoxバージョン41 Document.execCommand（）が機能するようになりました。したがって、フォールバックを使用する必要はもうありません。

クリップボードへのアクセスに関しては、ブラウザーの動作が異なるように見えるため、頭を動かすのに時間がかかりました。

それはあなたのソリューションにかなり似ていますが、違いは一時的な要素を作成し、それを入力valueで埋めることです。これにより、入力のdisplayプロパティをnoneに設定したままにできます。

の回避策もあります。つまり、window.clipboardDataを使用するです。

Firefoxは、クリップボードへのアクセスをまったく許可しません。したがって、ユーザーが入力値を手動でコピーできるようにするために、Promptを追加する必要がありました。確かにPromptは見苦しいですが、ウィンドウのようなモーダルを使用するだけで同じことができます。

これは気の利いたもののように見えるので、私はWin7（64ビット）でテストしています

Chrome-バージョン43.0.2357.134 m

IE-バージョン11.0.9600.17914

とにかくFirefoxは無関係です。とにかくアクセスできないからです。

var copyBtn   = $("#copy-btn"),
    input     = $("#copy-me");

function copyToClipboardFF(text) {
  window.Prompt ("Copy to clipboard: Ctrl C, Enter", text);
}

function copyToClipboard() {
  var success   = true,
      range     = document.createRange(),
      selection;

  // For IE.
  if (window.clipboardData) {
    window.clipboardData.setData("Text", input.val());        
  } else {
    // Create a temporary element off screen.
    var tmpElem = $('<div>');
    tmpElem.css({
      position: "absolute",
      left:     "-1000px",
      top:      "-1000px",
    });
    // Add the input value to the temp element.
    tmpElem.text(input.val());
    $("body").append(tmpElem);
    // Select temp element.
    range.selectNodeContents(tmpElem.get(0));
    selection = window.getSelection ();
    selection.removeAllRanges ();
    selection.addRange (range);
    // Lets copy.
    try { 
      success = document.execCommand ("copy", false, null);
    }
    catch (e) {
      copyToClipboardFF(input.val());
    }
    if (success) {
      alert ("The text is on the clipboard, try to paste it!");
      // remove temp element.
      tmpElem.remove();
    }
  }
}

copyBtn.on('click', copyToClipboard);
#copy-me {
    display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Element To Be Copied" id="copy-me" value="foo loves bar"/>
<button id="copy-btn">Copy</button><br/><br/>
<textarea placeholder="paste here"></textarea>
29
DavidDomain

JQueryを使用しない私のソリューションは次のとおりです。

function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}
<!DOCTYPE html>
<html>
<head>
<title>Set Clipboard</title>
</head>
<body>
    <button onclick="setClipboard('foo loves bar')">Set Clipboard</button>
</body>
</html>
61
Dan Stevens

@DavidDomainの助けのおかげで、ややハッキングはあるが機能的なアプローチを見つけました。

まず、入力方法を画面から移動し、いくつかのプロパティを変更して、次の結果を得ました。

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo" style="display:none; position: relative; left: -10000px;"/>

display：noneは、jsに対する以下の変更後に追加されました

その後、@ Pokkanomeからのコメントにより、onClick関数を次のように変更できます。

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.style.display = 'block';
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);
    copyDiv.style.display = 'none';
}

この方法を使用して非表示のdivからコピーできるかどうかはわかりませんが、クリップボードへの疑いのないアクセスを許可することは多少危険です。しかし、取られたアプローチは意図した結果と同じでした。

16
Aaron Critchley

2019-オフスクリーンのものなしで答えを探していました。

最初に入力テキストフィールドをtype = "text"に変更し、テキストをコピーしてからtype = "hidden"に戻します。それはうまくいきます。

<input id="dummy" name="dummy" type="hidden">

<script>
var copyText = document.getElementById("dummy");
copyText.type = 'text';
copyText.select();
document.execCommand("copy");
copyText.type = 'hidden';
</script>
2
Rick

私に合ったのは：

<div>
  <a class="copyBtn">Copy</a>
  <input class="d-none" value="teste">
</div>

そして：

$('.copyBtn').on('click', function(e) {
  e.preventDefault();
  var input = $(this).parent().find(".dirVal");
  $(input).removeClass("d-none");
  input.select();

  document.execCommand('copy');
  $(input).addClass("d-none");
  callNotify("Parabéns!", "Caminho copiado para área de transferência!", "success");
});
1
Douglas Lopes

この質問は非常に古いので、新しい、あまり古くない回答があります。

このスクリプトを使用すると、データをコピーできます。過去のものよりもはるかに小さい

入力WAYYYを画面の横に非表示にして、非表示にするだけです。それでもコピー機能を保持しながら（ディスプレイを使用する場合とは異なり：なし;）

function copyFunc() {
  var copyText = document.getElementById("copyInp");
  copyText.select();
  document.execCommand("copy"); //this function copies the text of the input with ID "copyInp"
}
<input type="text" value="StuffYaWantCopied" id="copyInp" style="position:absolute;left:-1000px;top:-1000px;">
  <a onclick="copyFunc()" style="cursor:cell;">
     Click here to Copy!
  </a>
1
Taylor Spark