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

Question

我需要一些帮助，我有一个很好的复制到剪贴板功能，该功能非常适合 ids，并且网站上只有一个按钮。但我认为我需要对多个按钮和具有类标识符的多个值完成它，但我真的不知道如何将其从 id 标识符切换/更改为类标识符，并使其适用于一页上的多个按钮和输入。你能帮我一下吗？

这是我的 HTML 按钮，带有 ID 标识符，我需要类来使其适用于多个按钮:

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

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

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

希望你明白我想要的

最后是 Javascript 代码，应将其切换为类标识符，以便在一页上复制多个/多个值:

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);
}