Question

我正在尝试使用Javascript将文本从下一个div复制到剪贴板。下面是我当前的代码：

HTML：

<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>

Javascript：

$(".btnFileCopy").click(function () {
    var copyText = document.getElementsByClassName("hl7MsgBox");
    copyText.select();
    document.execCommand("copy");
});

我希望将新输出粘贴到notepad中时得到：

但是，由于某种原因，它不起作用并抛出下一条错误消息：

未捕获的TypeError：copyText.select不是函数...

有人知道我该如何解决这个问题？

Answer 1

首先，请参考：

Document接口的getElementsByClassName方法返回具有所有给定类名的所有子元素的类似数组的对象。在文档对象上调用时，将搜索完整的文档，包括根节点。您也可以在任何元素上调用getElementsByClassName（）；它将仅返回具有给定类名称的指定根元素的后代的元素。

因此，在您的特殊情况下，hl7MsgBox变量将包含一个元素数组（那些在文档元素下具有类copyText[0]的元素）。现在，因为在您的情况下，该类只有一个元素，所以我们可以使用copyText[0].textContent访问它，并使用const copyToClipBoard = (str) => { const el = document.createElement('textarea'); el.value = str; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); }; $(".btnFileCopy").click(function () { var copyText = document.getElementsByClassName("hl7MsgBox"); copyToClipBoard(copyText[0].textContent); });获取它包装的所有文本。最后，我制定了一种将字符串复制到剪贴板并使用它的通用方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hl7MsgBox">
    <span class="boxspan">1</span>
    <br>
    <span class="boxspan">2</span>
    <br>
    <span class="boxspan">3</span>
    <br>
    <span class="boxspan">4</span>
    <br>
    <span class="boxspan">5</span>
    <br>
    <span class="boxspan">6</span>
    <br>
    <span class="boxspan">7</span>
    <br>
    <span class="boxspan">8</span>
</div>
<button class="btnFileCopy">Copy To Clipboard</button>

preProc() {
return tf.tidy(() => {
  // Reads the image as a Tensor from the webcam <video> element.
  const webcamImage = tf.fromPixels(this.webcamElement);

  //Resize to our image and get back single channel for greyscale
  const croppedImage = this.cropImage(webcamImage, 1);

  // Expand the outer most dimension so we have a batch size of 1.
  const batchedImage = croppedImage.expandDims(0);

  // Normalize the image between -1 and 1. The image comes in between 0-255,
  // so we divide by 127 and subtract 1.
  return batchedImage.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
});
}

/**
* Crops an image tensor so we get a square image with no white space.
* @param {Tensor4D} img An input image Tensor to crop.
*/
cropImage(img, dim=3) {
  const size = Math.min(img.shape[0], img.shape[1]);
  const centerHeight = img.shape[0] / 2;
  const beginHeight = centerHeight - (size / 2);
  const centerWidth = img.shape[1] / 2;
  const beginWidth = centerWidth - (size / 2);
  return img.slice([beginHeight, beginWidth, 0], [size, size, dim]);
}

Answer 2

只需从DIV中获取文本并传递到此函数即可。

function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}   

copyToClipboard('hello'); //hello

使用javascript

2 个答案: