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

wwwo4jvm 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(133)

我正在尝试为法语特殊字符构建一个类似于虚拟键盘的东西，这样用户就可以通过点击特殊字符按钮轻松复制它们，并将它们粘贴到他们需要的任何地方。我不是很擅长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，但它返回了一个“undefined”值。我也对js的其他方法持开放态度，因为我看到可以使用常量等，但所有的例子都是为了从输入字段复制值而设计的，出于某种原因，我不能管理不要调整它们来复制按钮的文本。
任何帮助将不胜感激！谢谢

JavaScript

来源：https://stackoverflow.com/questions/68396853/multiple-copy-to-clipboard-buttons-copy-text-from-the-button-itself

2条答案

按热度按时间

lndjwyie1#

你可以像这样将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>

赞(0）回复(0）举报 2023-04-10

bq9c1y662#

我也是新手，我使用了W3的一些东西，然后按照这里的一个例子，但需要添加“多按钮”的情况，然后从这里获取信息。
=）它为我工作。

<script>
 function copyClipboard(target) {
    var copyText = document.getElementById(target).innerHTML;
    //document.execCommand("copy"); --> is obsolet
    navigator.clipboard.writeText(copyText);
          }

<button onclick="copyClipboard(getAttribute('id'))" id="xxxx">123</button>

赞(0）回复(0）举报 2023-04-10

我来回答

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

2条答案

相关问题

热门标签

最新问答