Question

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

这是JS：

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

Here is codepen

Answer 1

这里发生了两件事：

jQuery没有使用剪贴板返回功能。我使用var j = $;
您正在尝试返回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 2

我检查了你的codepen。我已做出以下更改并且复制正在运行

从js中删除剪贴板js插件代码，并将其作为外部资源资源添加到js部分（外部资源cdn链接：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 3

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

Answer 4

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

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

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

4 个答案:

Codepen