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

时间:2017-08-01 06:28:48

标签: javascript jquery html css clipboard.js

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

这是JS:

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

Here is codepen

4 个答案:

答案 0 :(得分:1)

这里发生了两件事:

  1. jQuery没有使用剪贴板返回功能。我使用var j = $;

  2. 传递了它
  3. 您正在尝试返回jQuery元素,而clipboard.js只接受本机JS元素。而不是使用target:使用text: - 这样您就可以传递确切的文本字符串而不是元素。

  4. 这对我有用:

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

    Codepen

答案 1 :(得分:0)

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

  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();
    }
    });
    

答案 2 :(得分:0)

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

答案 3 :(得分:0)

另外,我找到了另一个答案,就是:

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