表单“提交”按钮将 URL 复制到剪贴板答案

【问题标题】：Form 'Submit' Button Copy URL to Clipboard表单“提交”按钮将 URL 复制到剪贴板
【发布时间】：2018-07-06 07:51:29
【问题描述】：

我有一个带有“get”方法的 HTML 表单。当我单击“提交”时，操作是在新选项卡中打开一个 php 文件。这工作正常，因为我使用了“获取”，所以我可以复制/粘贴 URL，然后在最初提交表单时使用相同的变量返回到同一页面。

现在我希望在表单中添加一个额外的按钮，但我希望它将包含所有变量的 URL 复制到剪贴板，而不是在新选项卡中打开 URL。

我不是在找人为我编写代码，只是为我指明了正确的方向。我是否应该尝试找出一种方法来构建 URL，然后使用 Javascript 将其复制到剪贴板？ PHP 会更有意义吗？

如果有人认为它会有所帮助，我可以发布到目前为止的代码，但它实际上只是一个基本的 HTML 表单。无论表单中有哪些字段等，我如何使用这些字段构建 URL？

我希望既然它已经构建了 URL 以在新选项卡中将您重定向到那里，所以有办法抓住它并将其复制到剪贴板而不实际重定向它们。

编辑

问题被标记为重复，因为其他问题已回答如何将简单文本复制到剪贴板。我想我在原始问题中不够清楚，我想在它构建 URL 之后中断表单，但在它将你重定向到 URL 之前。然后将该 URL 复制到剪贴板。可能不可能，因为我已经做了很多谷歌搜索并且没有找到任何东西。如果有人甚至可以告诉我是否有可能，那将不胜感激。

也许这样做的唯一方法是自己构建 URL，然后复制到剪贴板，这很好，但我想确保我没有遗漏一些非常简单的东西，比如 formtarget = 'clipboard' 或者只是让太有道理了。

【问题讨论】：

根据应用程序，我可能会在 JavaScript 中构建 URL 并将其复制到剪贴板。见How to create query parameters in Javascript? 和How do I copy to the clipboard in JavaScript?
您必须小心发布这些类型的问题。当我开始使用 Stack 时，我正在做类似的事情。您不仅描述了您所做的努力，而且还展示了您的努力。尝试编写您打算使用的代码（通过您自己的研究）。我认为您最初被否决是因为您没有这样做。
在 Google 上搜索“点击复制”会引导您朝着正确的方向前进。
当您在 Google 上搜索 Click to Copy 之类的内容时，您不会相信随机出现的垃圾数量。复制各种我没有兴趣复制的东西。我问是因为我希望我错过了什么，因为当它把你重定向到 URL 时工作已经完成。

标签： html forms

【解决方案1】：

我只是把它放在一起。几年来我一直在使用它的一个变体。

将您的 URL 显示到一个 div，然后让您的按钮引用该显示的 div。我已经完成了您正在尝试做的事情，并且这种方式效果很好。

HTML

<h3 id="copyMe">Click that button and you'll copy all of me.</h3>

<button class="btn btn-lg btn-secondary" onclick="copyToClipboard('#copyMe')"><i class="fa fa-files-o" aria-hidden="true"></i>Click to Copy</button>

JavaScript

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

查看Codepen

【讨论】：

感谢网络青蛙的信息，我会检查一下，如果它对我有用，请告诉您。