时间戳

首页 > 解决方案 > 我无法弄清楚我的 HTML 和 jQuery 实现有什么问题

html - 我无法弄清楚我的 HTML 和 jQuery 实现有什么问题

问题描述

我对 HTML 和 jQuery 非常陌生，这可能是一个愚蠢的问题，但是，相信我，我已经尝试了所有我认为有意义的事情。

所以我正在制作一个为我的 mc 服务器预先构建的网站。它使用有意义的 .twig 文件。我的目标是添加一个按钮，按下该按钮会将服务器 IP 复制到剪贴板。我从这个链接在线找到了这段代码：https ://codepen.io/shaikmaqsood/pen/XmydxJ ，它应该可以工作。我复制了 HTML 按钮并将其粘贴到我的头文件中：

<button onclick="copyToClipboard('ip')">IP</button>

我尝试了多种方式的js。我尝试制作一个新的 jS 文件并使用 '' 并且还制作了一个实际的块：

<script>
function copyToClipboard(element) {
   var $temp = $("<input>");
   $("body").append($temp);
   $temp.val($(element).text()).select();
   document.execCommand("copy");
   $temp.remove();
}
</script>

但是，每当我单击该按钮时，它都不会复制任何内容。我挑衅地做错了什么，我将不胜感激。谢谢！。

这就是我所拥有的：

<button id="copyButton" onclick="copyToClipboard()">ip.adress.net</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
let copyButton = document.getElementById("copyButton");

function copyToClipboard() {
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(copyButton.innerText).select();
    document.execCommand("copy");
    $temp.remove();
}
</script>

更新：我尝试了 Tryit 编辑器，只是该代码运行良好，但是由于某种原因，它不在我的网站上，我现在很迷茫......

标签： htmljquery

解决方案

你实际上可以只使用.innerText元素......

解决方案-

<script>
let copyButton = document.getElementById("copyButton");

function copyToClipboard() {
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(copyButton.innerText).select();
    document.execCommand("copy");
    $temp.remove();
}
</script>

我还找到了另一种方法-

const copyToClipboard = str => {
        const el = document.createElement('textarea');
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    };
};

如果您正在寻找不同的方法，只需将您的功能替换为上面的功能......

这是在这里找到的 - https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript

我希望这有帮助！祝你的编码之旅好运

推荐阅读