使用按钮点击尝试从文本区域复制代码

Question

我正试图添加一段代码，以便让我的用户从文本区域中复制某些链接。这很基础，但是当我尝试粘贴时，虽然我看到成功的响应，但它没有复制。我漏掉了什么吗？

<textarea id="shareInfo" class="form-control" rows="10" disabled="disabled"><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>

</textarea>
        <button onclick="copyInfoCode()" class="btn btn-success mt-2">Copy code</button>

        <script>
            function copyInfoCode() {
                $("#shareInfo").select();

                try {
                  var success = document.execCommand("copy");
                  console.log("Copying " + (success ? "Code copied successfully." : "Copy failed, please try again"));
                } catch (err) {
                  console.log("Copying failed");
                }
            }
        </script>

- santa

---

你的控制台有错误吗？我猜想是有的。 - epascarello

Answer 1

当 textarea 被禁用时，execCommand 将不起作用。请改用 readonly 属性代替 disabled 属性。

原始回答：最初的回答。

function copyInfoCode() {
    $("#shareInfo").select();

    try {
        var success = document.execCommand("copy");
        console.log("Copying " + (success ? "Code copied successfully." : "Copy failed, please try again"));
    } catch (err) {
        console.log("Copying failed");
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<textarea id="shareInfo" class="form-control" rows="10" readonly><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>
</textarea>
 <button onclick="copyInfoCode()" class="btn btn-success mt-2">Copy code</button>

- amrender singh

Answer 2

尝试下面的代码片段。您可以在除textarea之外的任何元素上使用它，而且不需要jQuery。

function shareInfoClick(){  copyToClipboard(document.getElementById("shareInfo").value);
}

function copyToClipboard(str) {
            const el = document.createElement('textarea');  // Create a <textarea> element
            el.value = str;                                 // Set its value to the string that you want copied
            el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
            el.style.position = 'absolute';
            el.style.left = '-9999px';                      // Move outside the screen to make it invisible
            document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
            const selected =
                document.getSelection().rangeCount > 0        // Check if there is any content selected previously
                    ? document.getSelection().getRangeAt(0)     // Store selection if found
                    : false;                                    // Mark as false to know no selection existed before
            el.select();                                    // Select the <textarea> content
            document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
            document.body.removeChild(el);                  // Remove the <textarea> element
            if (selected) {                                 // If a selection existed before copying
                document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
                document.getSelection().addRange(selected);   // Restore the original selection
            }
            alert("Text copied to clipboard");
        }

<!-- make read-only instead of disabling -->
<textarea id="shareInfo" class="form-control" rows="10" readonly><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>

</textarea>
<button onclick="shareInfoClick()" class="btn btn-success mt-2">Copy code</button>

- Giddy Naya