时间戳

首页 > 解决方案 > 无法使用动态创建的按钮复制文本

javascript - 无法使用动态创建的按钮复制文本

问题描述

我有以下用于复制文本字符串的函数：

function copyText(str) {
    console.log(str);
    let tmp = $('<input type="text">').appendTo(document.body);
    tmp.val(str.toString() );
    tmp.select();
    document.execCommand('copy');
    tmp.remove();
}

此函数在从控制台调用和从按钮按下调用时都可以正常工作。

我有一个复制颜色的功能：

function copyColor(elm) {
    let hex = $(elm.parentElement).find('span').html();
    console.log('copyText("' + hex + '")' );
    copyText(hex);
}

当按下按钮时调用此函数。按钮将自身作为参数传递。我正在动态创建按钮（每个按钮都代表一个新的“颜色项”）。这是使用 jQuery 动态插入的 HTML：

'<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'

整个事情是：

    $('#' + mode + '-modal .modal-body').prepend(
        '<div class="' + mode + '-item color-item">'
    +       '<button class="btn open-btn no-color" title="Open Color" data-toggle="popover" onclick="openColor(this, \'' + mode + '\');"><i class="fas fa-external-link-alt"></i></button>'
    +       '<input class="form-control color-name" type="text" placeholder="Name your color (optional)" value="' + name + '">'
    +       '<br class="mobile-only">'
    +       '<div class="color-preview" style="background-color:' + hex + ';"></div>'
    +       '<span>' + hex + '</span>'
    +       '<button class="btn copy-btn no-color" title="Copy" data-toggle="popover" onclick="copyColor(this);"><i class="fas fa-copy"></i></button>'
    +       '<button class="btn link-btn no-color" title="Get Link" data-toggle="popover" onclick="copyColorLink(this);"><i class="fas fa-link"></i></button>'
    +       '<button class="btn delete-btn no-color" title="Remove" data-toggle="popover" onclick="removeColor(this);"><i class="fas fa-trash"></i></button>'
    +       '<i class="fas fa-arrows-alt" style="cursor:move;" title="Drag to Change Order" data-toggle="popover"></i>'

    // +        '<button onclick="copyText(\'hi\')">hi</button>'

    +   '</div>'
    );

其中mode, hex, 和name都是该函数中的参数。

每次我单击复制颜色时，它都会调用copyColor()函数，获取正确的字符串，调用copyText()函数，获取正确的字符串，并且运行时没有错误，但是它无法编辑我的剪贴板。从控制台调用此函数时，使用完全相同的字符串，它可以工作，并且在创建静态按钮来复制颜色时，例如：

<button onclick="copyText('hi')">hi</button>

然后它也可以正常工作。我也尝试过动态添加以下按钮之一：

+ '<button onclick="copyText(\'hi\')">hi</button>'到我的注入 HTML 的代码，它不起作用。

上面看到的其他动态创建的按钮也调用函数并将自身作为参数传递并且工作正常，例如删除按钮，调用removeColor()函数this作为参数。

最后，我尝试通过以下方式为按钮提供动态 ID：

'<button id="copy-btn-'+ nextID +'"ETC...

我增加的值在哪里nextID，我在创建后立即为该特定按钮添加了 onclick 侦听器：

$('#copy-btn-'+nextID).click(function() {
    copyText('hello');
});
nextID++;

我尝试创建一个只接受字符串的新复制函数，而不是传递一个元素，我只是传递要复制的字符串：

function copyColorNew(hex) {
    console.log('copyText("' + hex + '")' );
    copyText(hex);
}

这是插入的按钮代码的相关部分：

onclick="copyColorNew(\''+hex+'\');">

它正确调用函数，传递正确的参数，并且无法复制字符串。

我没有任何重复的函数名称，所有文件都正确包含，我已经刷新了页面，所有变量都在各自的范围内，而且我从来没有遇到任何错误。我还省略了我做过的许多其他相当不确定的实验。

我完全没有想法，而且我每天都在这个问题上花费了好几个小时。我很清楚如何在 javascript 中复制字符串，我很清楚如何创建一个按钮并动态附加它，我很清楚如何为按钮提供一个 onclick 侦听器，该侦听器将自身作为参数传递。过去我在这些事情上没有遇到任何问题，而且我在这段代码中的其他任何地方都没有，正如我在上面详述的那样。

我唯一能想到的是允许动态创建的 DOM 元素调用访问剪贴板的函数是一个安全问题，但我什至没有粘贴数据。

同样，静态 HTML 页面中的按钮可以正确复制“hello world”，而动态插入的按钮无法复制“hello world”。

标签： javascriptjqueryhtml

解决方案

通过使用剪贴板 API（由Reddit上的 u/elmstfreddie 建议）：

navigator.clipboard.writeText(hex);

我让它工作。我在我的函数中替换copyText(hex);为。navigator.clipboard.writeText(hex);copyColor()

这是文档的链接。

推荐阅读