web-dev-qa-db-ja.com

テキストを<span>からクリップボードにコピーします

_<span>_のinnerContentをクリップボードにコピーしようとして成功しませんでした：

HTML

_<span id="pwd_spn" class="password-span"></span>
_

JavaScript

関数呼び出し

_    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy').addEventListener('click', copy_password);
});
_

関数

_function copy_password() {
    var copyText = document.getElementById("pwd_spn").select();
    document.execCommand("Copy");
}
_

私も試しました：

_function copy_password() {
    var copyText = document.getElementById("pwd_spn").textContent;
    copyText.select();
    document.execCommand("Copy");
}
_

両方で次のエラーが発生するため、.select()は_<span>_要素では機能しないようです。

enter image description here

javascripthtmlcopyclipboardcopy-paste
7
Gucci

これを行うには、一時テキスト領域を作成してページに追加し、span要素のコンテンツをテキスト領域に追加し、テキスト領域から値をコピーしてテキスト領域を削除します。

セキュリティ上の制限のため、ユーザーがページを操作した場合にのみCopyコマンドを実行できるため、ユーザーがボタンをクリックした後にボタンを追加し、テキストをコピーする必要があります。

document.getElementById("cp_btn").addEventListener("click", copy_password);

function copy_password() {
    var copyText = document.getElementById("pwd_spn");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}
<span id="pwd_spn" class="password-span">Test</span>
<button id="cp_btn">Copy</button>
27
rafaelgssa

https://stackoverflow.com/a/48020189/224067 を参照してください重複を避けるため。

基本的に、クリップボードにコピーするときは、選択したテキストを作成する必要があります。<textarea>および<input>要素にはselect()メソッドがあるため、これが簡単になりますが、 <div>や<span>のような他のタイプの要素からコンテンツをコピーするには、以下を行う必要があります。

  1. Rangeオブジェクトを作成/取得します（一部のブラウザーはコンストラクター、またはこれを行う適切な方法を提供しません）。 document.getSelection().getRangeAt(0)を呼び出すと、Edgeを除くほとんどのブラウザーで動作することがわかりました（ie11は動作します）。
  2. コピー元の要素をその範囲の選択に追加します。
  3. その範囲をウィンドウまたはドキュメントSelectionに追加します。
  4. document.execCommand("copy")を呼び出して、選択したテキストをコピーします。

また、SelectionとRangeのAPIを確認することをお勧めします。これにより、これをよりよく把握できます。

2
J. García