多个按钮的复制到剪贴板功能如何从 id 切换到 class 标识符

Question

我需要一些帮助，我有一个很好的复制到剪贴板功能，它适用于 ids 并且网站上只有一个按钮。但是我需要为多个按钮和多个值完成我认为 class 标识符，但我真的不知道如何从 id 标识符 switch/change 到 class 标识符并使其工作对于一页上的多个按钮和输入。你能帮帮我吗？

这是我的带有 ID 标识符的 HTML 按钮，我需要它 class 以使其适用于多个按钮：

<button type="submit" id="bbcopyButton" class="btn btn-md btn-primary-filled btn-form-submit">BB Code copy</button>

这是通过 ID 复制的输入，但我需要使其与 Class 一起使用，以便从不同的输入类型复制更多值：

<input type="text" class="form-control" id="bbcopyTarget" value="valueno.1" name="name" readonly="readonly" onclick="focus();select();">

希望你明白我想要什么

最后是 Javascript 代码，为了在一页上复制 several/multiple 值，应该将其切换为 class 标识符：

document.getElementById("bbcopyButton").addEventListener("click", function() {

    copyToClipboardMsg(document.getElementById("bbcopyTarget"), "bbcopyButton");

});

function copyToClipboardMsg(elem, msgElem) {
    var succeed = copyToClipboard(elem);
    var msg;
    if (!succeed) {
        msg = "Press Ctrl+c to copy"
    } else {
        msg = "BB Code copied <i class='lnr lnr-thumbs-up'></i>"
    }
    if (typeof msgElem === "string") {
        msgElem = document.getElementById(msgElem);
    }
    msgElem.innerHTML = msg;
    msgElem.style.background = "green";
    msgElem.style.border = "2px solid green";

    setTimeout(function() {
        msgElem.innerHTML = "BB Code copy";
        msgElem.style.background = "";
        msgElem.style.border = "";

    }, 2000);
}



function copyToClipboard(elem) {
    // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

有些帮助会很好。谢谢。

当我有第二个具有相同 ID 的按钮时，我会让它更清楚一点 Javascript/JQuery 代码什么都不做，不能指向第二个输入值这将是第二个按钮：

<button type="submit" id="bbcopyButton" class="btn btn-md btn-primary-filled btn-form-submit">BB Code copy</button>

我要从中复制的第二个输入：

<input type="text" class="form-control" id="bbcopyTarget" value="valueno.2" name="name" readonly="readonly" onclick="focus();select();">

希望这有助于更好地理解

Answer 1

输入此代码：

var but = document.getElementsByClassName('btn btn-md btn-primary-filled btn-form-submit');
var txt = document.getElementsByClassName('form-control');

for (let x=0; x < but.length; x++){
    but[x].addEventListener("click", function() {
        copyToClipboardMsg(txt[x], but[x]);
    }, false);
}

而不是：

document.getElementById("bbcopyButton").addEventListener("click", function() {

    copyToClipboardMsg(document.getElementById("bbcopyTarget"), "bbcopyButton");

});

这仅在按钮数 = txt 字段数时有效。如果你想避免使用 let 那么你需要像这样改变它：

var but = document.getElementsByClassName('btn btn-md btn-primary-filled btn-form-submit');
var txt = document.getElementsByClassName('form-control');
for (var x = 0; x < but.length; x++) {
  (function(x) {
    but[x].addEventListener("click", function() {
      copyToClipboardMsg(txt[x], but[x]);
    }, false);
  })(x);
}

多个按钮的复制到剪贴板功能如何从 id 切换到 class 标识符

Copy to Clipboard function for multiple buttons how to switch from id to class identifier

html

javascript

clipboard

jquery

copy-paste