Question

我要复制一些写入剪贴板的文本。

我创建了以下函数：

function copyTextToClipboard(){
 document.getElementById("contactsInfo").select();
 document.getElementById("contactsInfo").setSelectionRange(0, 99999)
 document.execCommand("copy");
}

当用户单击元素时调用：

document.getElementById("contactsInfo").addEventListener("click", ()=>{
 copyTextToClipboard();
})

HTML中的元素：

<div class="information-container">
 <p id="contactsInfo">Email: allab.di@ubi.pt</p> 
 <p id="contactsInfo">Phone: +310961810340</p>
 <p id="contactsInfo">Street: Bolama</p> 
</div>

虽然没有复制，这是什么问题？

Answer 1

正如评论中的某人所说，一个id在文档中必须是唯一的。

如果要用相同的名称标识它们，请使用类或名称。

<div class="information-container">
  <p class="contactsInfo">Email: allab.di@ubi.pt</p> 
  <p class="contactsInfo">Phone: +310961810340</p>
  <p class="contactsInfo">Street: Bolama</p> 
</div>

function copyTextToClipboard(){
    const el = document.createElement("textarea");
    el.value = this.innerHTML;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

}
document.querySelectorAll('.contactsInfo').forEach(
    el => el.addEventListener('click', copyTextToClipboard)
);

编辑：

此外，<p>不支持select()。

无法将文本复制到剪贴板

1 个答案: