复制到剪贴板 HTML

Question

我正在创建一个小站点来使用 asin 生成亚马逊会员链接我使用了一个小脚本来生成 URL，但我希望直接在剪贴板中复制输出。

我环顾四周，没有找到适合我的问题的解决方案。

这是我用来生成 URL 的脚本。

HTML 部分只是一个输入和一个按钮。

<script>
    function myFunction() {
        let userInput = document.querySelector("#userInput");
        let url = document.querySelector("#url");
        
        url.innerHTML = "https://www.amazon.it/dp/" + userInput.value + "/ref=nosim?tag=altpe-21";
    }
</script>

Answer 1

如果您想要一个简单的解决方案，您必须在链接已经创建并在网站中创建后创建另一个函数。

新函数将使用document.getElementById()函数和.select()方法

示例和实现可以在这里找到：

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Answer 2

为此，您可以在navigator器中使用Clipboard API。

<script>
    function myFunction() {
        let userInput = document.querySelector("#userInput");
        let url = document.querySelector("#url");
        
        let output = "https://www.amazon.it/dp/" + userInput.value + "/ref=nosim?tag=altpe-21";
        url.innerHTML = output;

        navigator.permissions.query({name: "clipboard-write"}).then(result => {
            if (result.state == "granted" || result.state == "prompt") {
                 navigator.clipboard.writeText(output);
            }
        });

    }
</script>

Answer 3

这是简单的解决方案：

/* Get the text field */
var copyText = document.getElementById("myInput");
    
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
    
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
    
/* Alert the copied text */
alert("Copied the text: " + copyText.value);