Selecting child elements with JS/jQuery

Question

I've created a click to copy function so that users can click a button to copy the text content of another element. I've set this up so users can copy their serial number (which is generated dynamically from a shortcode - in Wordpress ).

I had this working where the target container (that contains the text to be copied) was #copyTarget2 and the trigger button was #copyButton2 . I then had this Javascript that was working:

<script>
document.getElementById("copyButton2").addEventListener("click", function() {
    copyToClipboardMsg(document.getElementById("copyTarget2"), "msg");
});

document.getElementById("pasteTarget").addEventListener("mousedown", function() {
    this.value = "";
});


function copyToClipboardMsg(elem, msgElem) {
      var succeed = copyToClipboard(elem);
    var msg;
    if (!succeed) {
        msg = "Copy not supported or blocked.  Press Ctrl+c to copy."
    } else {
        msg = "Text copied to the clipboard."
    }
    if (typeof msgElem === "string") {
        msgElem = document.getElementById(msgElem);
    }
    msgElem.innerHTML = msg;
    setTimeout(function() {
        msgElem.innerHTML = "";
    }, 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;
}
</script>

But now I've had to adjust the html so that I can dynamically display a 'NO VALID SERIAL NUMBER' message for any users who don't have an active serial number. This has meant that the element containing the text is different and is a child element of #copyTarget2 .

What I need to know is:

Using the following screenshot from Console can anyone tell me the best way to keep the copy functionality and select the input container inside #copyTarget2 ?

I have already tried #copyTarget2 input , #copyTarget2.input to no avail.

Please bare in mind that my JS is using GetElementbyID() so simply replacing #copytarget2 with input[type="text"] won't work either.

Answer 1

将GetElementbyID更改为querySelector并尝试使用此选择器

querySelector('input[name="_AFXSERIAL"]')

Answer 2

Either traverse the element you have by getElementsByTagName

document.getElementById('copyTarget2').getElementsByTagName('input')[0].value

or switch to querySelector

document.querySelector('#copyTarget2 input').value

Answer 3

If you want to experiment, you can try this Web API, https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

This will help you remove the entire script you have written and will give you additional features as well like cut and paste.

Do check the compatibility chart though.

Also, putting the "#copyTarget2" to the input would have worked too.

DOM would have become,

<span>
<strong>
<input id="copyTarget2" />
</strong>
</span>