首頁猿問將復制到剪貼板的 jQuery...

將復制到剪貼板的 jQuery 代碼轉換為純 JavaScript

JavaScript

慕村9548890 2022-10-27 10:56:10

我正在將下面的 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);

查看完整描述

2 回答

MM們

TA貢獻1886條經驗獲得超2個贊

這是一個例子：

copyLink (url) {

const el = document.createElement('textarea');

el.value = url;

document.body.appendChild(el);

el.select();

document.execCommand('copy');

document.body.removeChild(el);

反對回復 2022-10-27

守著星空守著你

TA貢獻1799條經驗獲得超8個贊

好吧，對于您提到的代碼部分，您需要在代碼庫中更改更多代碼。

首先你需要知道$("<input>")將創建一個輸入元素，它在普通 javascript 中的等價物是document.createElement("input").
$temp.val(value).select();將在一行中執行兩個操作，首先設置函數value參數input值，最后將通過select(). 因此，要將其翻譯成 javascript，我們需要執行以下兩個操作：

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

最后，您需要使用remove()而不是刪除該輸入元素removeElement()。

最終結果將是這樣的：

document.querySelector("#copymanager").addEventListener("click", (e) => {

e.preventDefault();

CopyToClipboard(document.location.href, true, "Value copied");

});

function CopyToClipboard(value, showNotification, notificationText) {

var $temp = document.createElement("input");

document.body.append($temp);

$temp.value = value;

$temp.select();

document.execCommand("copy");

$temp.remove();

if (typeof showNotification === "undefined") {

showNotification = true;

}

if (typeof notificationText === "undefined") {

notificationText = "Copied to clipboard";

}

var notificationTag = document.createElement("div");

notificationTag.className = "copy-notification";

notificationTag.innerText = notificationText;

if (showNotification) {

document.body.append(notificationTag);

notificationTag.style.display = "block";

notificationTag.style.transition = "opacity 1s";

setTimeout(function() {

notificationTag.style.opacity = "0";

notificationTag.remove();

}, 1000);

}

.copy-notification {

color: #ffffff;

background-color: rgba(0, 0, 0, 0.8);

padding: 20px;

border-radius: 30px;

position: fixed;

top: 50%;

left: 50%;

width: 150px;

margin-top: -30px;

margin-left: -85px;

display: none;

text-align: center;

}

<button id="copymanager">Click to copy to clipboard</button>

現場演示： codepen.io

反對回復 2022-10-27

2 回答
0 關注
109 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將復制到剪貼板的 jQuery 代碼轉換為純 JavaScript

將復制到剪貼板的 jQuery 代碼轉換為純 JavaScript

2 回答

添加回答