Question

以下HTML页面来自clipboardjs.com的clipboard.js演示。我喜欢它的工作原理，它突出了文本。

但是，我要求让它更改按钮以显示＆＃34;复制＆＃34;到＃34;复制了！＆＃34;一旦用户点击按钮并且它已成功完成复制到剪贴板。

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <input id="foo" type="text" value="hello">
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>

        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn');

        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>

Answer 1

这对我有用：

clipboard.on('success', function(e) {
    e.clearSelection();
    e.trigger.textContent = 'Copied!';
});

使用自定义事件从此tutorial引用：

首先，我们使用剪贴板中的clearSelection()实用程序功能清除复制内容区域内的选择。添加它是可选的。
然后我们将内容设置为“已复制！”

Answer 2

private void recarregarTabela()
{

    if (itensVenda.size() == 0)
    {   
        dtm.getDataVector().removeAllElements();
        dtm.setRowCount(0);
        lblTotal.setText("Total: R$" + String.valueOf(valorTotal));
    }
    else
    {

        dtm.getDataVector().removeAllElements();
        dtm.setRowCount(0);
        for (Item item : itensVenda)
        {

            Object[] vetor = new Object[3];
            vetor[0] = item.getNomeProduto();
            vetor[1] = item.getQtd();
            vetor[2] = String.format("%.2f", item.getPreco());
            System.out.println(item.getPreco());
            dtm.addRow(vetor);
        }
        lblTotal.setText("Total: R$" + String.valueOf(valorTotal));
    }
}

如何更改按钮以说“复制！”＃34;使用clipboard.js将文本复制到剪贴板后？

2 个答案: