点击复制文本字符串

Question

点击复制文本字符串

javascriptclipboardcopy-paste

54

我想要能够在点击时复制文本字符串，而不需要按钮。文本字符串将位于一个"span"类中。

用户将鼠标悬停在文本字符串上
用户点击文本字符串
文本字符串被复制到剪贴板

- Matthew

你卡在“没有按钮”的部分了吗？也就是说，你想知道如何为一个span元素编写点击事件处理程序吗？（提示：它非常、非常类似于按钮上的点击事件处理程序。）如果直到用户点击才会发生任何事情，那么你关于悬停的第一点似乎不相关。 - nnnnnn

@matthew 你复制完后想要把内容粘贴到哪里呢？ - mayank

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- renjogabro · Answer 1

大多数我在这里找到的答案似乎已经过时了。你应该使用剪贴板 API 而不是 execCommand。以下代码应该可以工作：

    let textString = document.querySelector('span.textstring').textContent; //Get value of the string you want to copy
    const copyText = async () => {
        try {
            await navigator.clipboard.writeText(textString);
            console.log('Content copied to clipboard!');
        } catch (err) {
            console.log('Copy failed!');
        }
    }
    document.querySelector('span.textstring').addEventListener('click', copyText); //Add the event handler click, so when the span is clicked, the value is copied

灵感和适应来源于：https://www.freecodecamp.org/news/copy-text-to-clipboard-javascript/

- Gtm · Answer 2

function copy(that){
var inp =document.createElement('input');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand('copy',false);
inp.remove();
}

<p onclick="copy(this)">hello man</p>