如何使用剪贴板复制输入的值.js

Question

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

这是JS：

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

这是代码笔

Answer 1

这里发生了两件事：

1. jQuery不适用于剪贴板返回函数。我用var j = $;通过了它

2. 您正在尝试返回 jQuery 元素和剪贴板.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();
}
});
...

代码笔

Answer 2

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

Answer 3

我已经检查了你的代码笔。我进行了以下更改，副本正在工作

1. 从 js 中删除剪贴板 js 插件代码，并在 js 部分将其设置为外部资源资源(外部资源 cdn 链接：https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js(

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

   /** 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 4

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

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