通过链接使用Rails和Javascript复制到剪贴板 | 通过链接使用Rails和Javascript复制到剪贴板

本文介绍了通过链接使用Rails和Javascript复制到剪贴板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面的代码可以很好地将URL复制到剪贴板.由于我使用 opacity:0 进行输入，因此有点笨拙，因为我无法使其与隐藏的输入配合使用.

The code below works fine to copy the url to clipboard. It is a bit hacky as I use opacity:0 for input since I could not make it work with hidden input.

如何将链接从复制链接"更改为已复制！"点击之后?

How can I change a link from "Copy Link" to "Copied!" after the click?

    function copytoclipboard() {
      var posturl = document.getElementById("posturl");
      posturl.select();
      document.execCommand("copy");
    }

    <a href="#" onclick="copytoclipboard()">Copy Link</a>

    <input type="text" value="request_original_url" id="posturl" style="opacity: 0;">

推荐答案

如果您有jquery，请尝试以下操作:

If you have jquery try this:

<a href="#" onclick="copytoclipboard(); $(this).text('Copied!');">Copy Link</a>

没有jquery:

<a href="#" onclick="copytoclipboard(); this.innerHTML='Copied!';">Copy Link</a>

这不是最干净的方法，但会更改链接文本.

Not the cleanest way to do it but it will change the link text.

顺便说一句，我不确定您的copytoclipboard()函数是否可以工作，或者是否可以在(所有)浏览器上工作，也许您可以尝试 https://github.com/zenorocha/clipboard.js 或类似的

By the way I am not sure whether your copytoclipboard() function works or will work across (all) browsers, perhaps you could try https://github.com/zenorocha/clipboard.js or something similar

这篇关于通过链接使用Rails和Javascript复制到剪贴板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！