如何使用 clipboard.js 复制输入值

Question

我不知道如何在不使用 ID 的情况下将值从输入复制到剪贴板！

这是 JS:

  new Clipboard(".form__copy-btn", {
    target: function (trigger) {
      return $(trigger).closest(".form__field-wrapper").find("input");
    }
  });

Here is codepen

Answer 1

我查看了你的代码笔。我进行了以下更改并且副本正在运行

从js中删除剪贴板js插件代码并在js部分添加itin设置为外部资源资源（外部资源cdn link：https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js）

我对您的代码进行了以下更改

/** I have used text method for copy and it is working **/
var clipboard = new Clipboard(".form__copy-btn", {
text: function(trigger) {
        // console.log($(trigger).closest(".form__field-wrapper").find("input").val());
  return $(trigger).closest(".form__field-wrapper").find("input").val();
}
});

Answer 2

您可以使用 document.execCommand('copy') 将值从输入复制到剪贴板。请参阅 link 以检查详细信息和浏览器兼容性。

Answer 3

这里发生了两件事：

jQuery 不适用于剪贴板 return 功能。我使用 var j = $;
您正在尝试 return 一个 jQuery 元素，而 clipboard.js 只需要一个原生 JS 元素。而不是使用 target: 使用 text: - 这样你就可以传递准确的文本字符串而不是元素。

这对我有用：

var j = $;

_document.ready(function () {

new Clipboard(".form__copy-btn", {
    text: function(trigger) {
        return j(trigger).closest(".form__field-wrapper").find("input").val();
    }
  });

...

Codepen

Answer 4

另外，我找到了另一个答案，这里是：

  new Clipboard(".form__copy-btn", {
    target: function (trigger) {
      return $(trigger).closest(".form__field-wrapper").find("input").get(0);
    }
  });

如何使用 clipboard.js 复制输入值

How to copy input's value with clipboard.js

html

javascript

css

jquery

clipboard.js

Codepen