html 如何从不同的按钮复制文本到剪贴板？

2w2cym1i 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(191)

我试图创建一个网页元素，当按下一个按钮时，将促销代码复制到剪贴板。我已经成功地为一个按钮完成了这个操作，但当添加其他按钮时，它只会复制第一个按钮的代码。我认为这是因为它们共享一个ID。
以下是我的按钮在HTML中的外观：（所有这些都在“contentPromo”p标签中有不同的代码，该文本是我试图复制到剪贴板的内容）

<!-- Button 1 -->
<div class="accordionPromo">
    <button id="copy">Get A Code</button>
</div>

<div class="panel">
<p id="contentPromo">Reds15</p>
</div>



<!-- Button 2 -->
<div class="accordionPromo">
    <button id="copy">Get A Code</button>
</div>

<div class="panel">
<p id="contentPromo">Cub50</p>
</div>

（我有2个这样的按钮）
我希望每个按钮可以被点击它的促销代码将复制到剪贴板。到现在为止，如果我点击第一个按钮，它将复制Reds15。当我点击第二个按钮，它不复制任何东西，我的剪贴板是不变的。这里是我的JavaScript，控制复制到剪贴板：

// Reference of the paragraph tag
const contentPromo = document.getElementById("contentPromo");

// Reference of the copy button
const copyBtn = document.getElementById("copy");

// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;

// Method responsible for copying the contentPromo
function copyToClipboard() {
    navigator.clipboard
       .writeText(contentPromo.innerText)
       .then(() => alert("Copied to clipboard"))
       .catch((e) => alert(e.message));
}

我如何让这个工作的4个独立的按钮？

Html

来源：https://stackoverflow.com/questions/74709124/how-to-copy-text-to-clipboard-from-different-buttons

1条答案

按热度按时间

nbysray51#

一个重要的问题是你有多个项目具有相同的ID，这在HTML中不是一件好事。它们应该都是唯一的，所以代码会找到第一个项目并给你数据。
如果你不需要一个可视的（面板类divs），给每个按钮一个唯一的ID，这就是你想要使用的代码。
举个简单的例子...

<style>
    .accordionPromo {
        margin: 0 0 15px 0;
    }   
</style>

<!-- Button 1 -->
<div class="accordionPromo">
    <button id="Reds15">Get A Code</button>
</div>

<!-- Button 2 -->
<div class="accordionPromo">
    <button id="Cub50">Get A Code</button>
</div>

<script>
    var clickedButton;
    //vanilla Javascript
    document.querySelectorAll('button').forEach(function(obj) {
      obj.addEventListener('click', function() {
        copyToClipboard(this.id);
      });
    });

    //jQuery option
    /*
    $('button').each(function() {
        $(this).on('click', function() {
        copyToClipboard(this.id);
        });
    });
    */

    function copyToClipboard(txt) {
        console.log(txt);
        navigator.clipboard
            .writeText(txt)
            .then(() => console.log('Copied to clipboard'))
            .catch((e) => console.log(e.message));
    }
</script>

querySelectorAll将获取页面上所有包含class、type等的元素。在本例中，"button"将在单击时添加一个侦听器。您仍然可以使用面板div作为可视化和样式，但繁重的工作是按钮本身和事件侦听器。添加jQuery选项时，只需删除不需要的选项即可。

编辑：已更改-添加了与OP问题更匹配的剪贴板副本

赞(0）回复(0）举报 2022-12-09

我来回答

html 如何从不同的按钮复制文本到剪贴板？

1条答案

相关问题

热门标签

最新问答