多个复制到剪贴板按钮 - 从按钮本身复制文本

Question

我正在尝试为法语特殊字符构建类似于虚拟键盘的东西，这样用户可以通过单击特殊字符按钮轻松复制它们并将它们粘贴到他们需要的任何地方。我在 javascript 方面不是很擅长，并且一直在努力使用我发现的一些代码来创建我需要的东西。到目前为止，我可以使用此代码使其仅适用于一个按钮。

我的html（只是摘录）

<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard()" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard()" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>

而我的javascript是

function copyStringToClipboard () {
   var str = document.getElementById("accbtn1").innerText;
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}

所以我知道 document.getElementById 只接受一个元素，所以我尝试 document.getElementsByClassName 但它 return 是一个“未定义”值。我也对 js 的其他方式持开放态度，因为我看到可以使用常量等，但是所有示例都旨在从输入字段复制值，并且出于某种原因我无法管理不要调整他们开始复制按钮的文本。

如有任何帮助，我们将不胜感激！谢谢

Answer 1

您可以像这样将 id 或 data 属性传递到您的函数中：

function copyStringToClipboard (target) {
   var str = document.getElementById(target).innerText;
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}

<div class="copy_btn_container">
<div class="copy_btn_block">
    <p>Accents graves et accents aigüs<p>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
    <button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>

多个复制到剪贴板按钮 - 从按钮本身复制文本

Multiple copy to clipboard buttons - copy text from the button itself

javascript

button

copy

clipboard