将复制到剪贴板的 jQuery 代码转换为纯 JavaScript

Question

我正在将下面的 jQuery 代码转换为纯 JavaScript。这里和这里的代码笔是它的原始 jQuery 版本。

function CopyToClipboard(value, showNotification, notificationText) {

    var $temp = $("<input>");

    $("body").append($temp);

    $temp.val(value).select();

    document.execCommand("copy");

    $temp.remove();

    ....

我的代码将其转换为 JavaScript。

function CopyToClipboard(value, showNotification, notificationText) {

    var $temp = document.querySelector("<input>");

    document.body.append($temp);

    $temp.value.select();

    document.execCommand("copy");

    $temp.removeElement();

    ...

这是错误：

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '<input>' is not a valid selector.

编辑：

function CopyToClipboard(value, showNotification, notificationText) {

    const inputElem = document.createElement('input');

    inputElem.value = value;    

    var $temp = document.querySelector("<input>");

    document.body.append($temp);

    $temp.select();

    document.execCommand("copy");

    document.body.removeChild(el);

Answer 1

这是一个例子：copyLink (url) {&nbsp; &nbsp; const el = document.createElement('textarea');&nbsp; &nbsp; el.value = url;&nbsp; &nbsp; document.body.appendChild(el);&nbsp; &nbsp; el.select();&nbsp; &nbsp; document.execCommand('copy');&nbsp; &nbsp; document.body.removeChild(el);},

Answer 2

好吧，对于您提到的代码部分，您需要在代码库中更改更多代码。首先你需要知道$("<input>")将创建一个输入元素，它在普通 javascript 中的等价物是document.createElement("input").$temp.val(value).select();将在一行中执行两个操作，首先设置函数value参数input值，最后将通过select().&nbsp;因此，要将其翻译成 javascript，我们需要执行以下两个操作：$temp.value&nbsp;=&nbsp;value; $temp.select();最后，您需要使用remove()而不是删除该输入元素removeElement()。最终结果将是这样的：document.querySelector("#copymanager").addEventListener("click", (e) => {&nbsp; e.preventDefault();&nbsp; CopyToClipboard(document.location.href, true, "Value copied");});function CopyToClipboard(value, showNotification, notificationText) {&nbsp; var $temp = document.createElement("input");&nbsp; document.body.append($temp);&nbsp; $temp.value = value;&nbsp; $temp.select();&nbsp; document.execCommand("copy");&nbsp; $temp.remove();&nbsp; if (typeof showNotification === "undefined") {&nbsp; &nbsp; showNotification = true;&nbsp; }&nbsp; if (typeof notificationText === "undefined") {&nbsp; &nbsp; notificationText = "Copied to clipboard";&nbsp; }&nbsp; var notificationTag = document.createElement("div");&nbsp; notificationTag.className = "copy-notification";&nbsp; notificationTag.innerText = notificationText;&nbsp; if (showNotification) {&nbsp; &nbsp; document.body.append(notificationTag);&nbsp; &nbsp; notificationTag.style.display = "block";&nbsp; &nbsp; notificationTag.style.transition = "opacity 1s";&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; notificationTag.style.opacity = "0";&nbsp; &nbsp; &nbsp; notificationTag.remove();&nbsp; &nbsp; }, 1000);&nbsp; }}.copy-notification {&nbsp; color: #ffffff;&nbsp; background-color: rgba(0, 0, 0, 0.8);&nbsp; padding: 20px;&nbsp; border-radius: 30px;&nbsp; position: fixed;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; width: 150px;&nbsp; margin-top: -30px;&nbsp; margin-left: -85px;&nbsp; display: none;&nbsp; text-align: center;}<button id="copymanager">Click to copy to clipboard</button>现场演示：&nbsp;codepen.io