时间戳

首页 > 解决方案 > 在 A/B 测试工具中复制到剪贴板

javascript - 在 A/B 测试工具中复制到剪贴板

问题描述

我是 JQuery 和一个名为 Convert 的 A/B 测试工具的新手。在其中一个实验中，我想添加一小段文本，当用户单击它时，它会将文本复制到剪贴板并显示一个工具提示，上面写着“已复制！” 但由于某种原因，代码不起作用，它没有显示错误，就像它甚至没有运行一样。我找不到错误，我不确定它是否可能是给我带来问题的工具，但希望有更多经验的人看看并告诉我是否做错了什么以了解如何改进。

这是HTML：

<a id="copy-promo-btn" href="#">PLUS79</a>

这是CSS：

.copy-notification {
        color: #ffffff;
        background-color: rgba(0,0,0,0.8);
        padding: 20px;
        border-radius: 30px;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 150px;
        margin-top: -30px;
        margin-left: -85px;
        display: none;
        text-align:center;}

这是javascript：

convert.$(document).ready(function() {
   $(document).ready(function () {
            $("#copy-promo-btn").click(function (event) {
                event.preventDefault();
                CopyToClipboard("PLUS79", true, "Copied!");
            });
        });

        function CopyToClipboard(value, showNotification, notificationText) {
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val(value).select();
            document.execCommand("copy");
            $temp.remove();

            if (typeof showNotification === 'undefined') {
                showNotification = true;
            }
            if (typeof notificationText === 'undefined') {
                notificationText = "Copied!";
            }

            var notificationTag = $("div.copy-notification");
            if (showNotification && notificationTag.length == 0) {
                notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
                $("body").append(notificationTag);

                notificationTag.fadeIn("slow", function () {
                    setTimeout(function () {
                        notificationTag.fadeOut("slow", function () {
                            notificationTag.remove();
                        });
                    }, 1000);
                });
            }
        }
});

标签： javascripthtmljquery

解决方案

这是通过将一些 java 脚本添加到现有代码中来将单击事件中的文本复制到剪贴板的方法。

.select()在您的情况下不起作用，因为它只选择文本但它不会复制它，在您的情况下，您还需要单击以复制和粘贴。

补充几点：

  1. 您需要在正文中创建元素并将文本值复制到其中
  2. 一旦复制成功，它将从 DOM 中删除输入值

运行下面的代码片段以查看它的工作原理。

$(document).ready(function() {
  $("#copy-promo-btn").click(function(event) {
    event.preventDefault();
    CopyToClipboard("PLUS79");
  });
});


function CopyToClipboard(value) {
  var copyvalue = document.createElement('input');
  copyvalue.value = value
  document.body.appendChild(copyvalue);
  copyvalue.select();
  document.execCommand('copy');
  console.log(copyvalue.value)
  document.body.removeChild(copyvalue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="copy-promo-btn" href="#">PLUS79</a>

推荐阅读