Question

希望大家都做得好。我用一些CSS创建了一个HTML。它的作用是突出显示悬停表格，并在点击时突出显示表格内的整个文本行。我想要实现的下一件事是自动复制突出显示的文本或在点击时执行自动复制。我尝试了一些谷歌浏览器自动复制扩展，但是，它不起作用。就像它没有在谷歌电子表格单元格上工作。

我一直在考虑使用javascript，但我不确定是否可以在HTML表格中自动复制突出显示的文本。

有关此问题的任何建议或提示吗？

    <script>
    if (!('select' in HTMLTableCellElement)) {
      HTMLTableCellElement.prototype.select = function() {
        var range = document.createRange();
        range.selectNodeContents(this);
        window.getSelection().addRange(range);
      }
    }
    </script>

            <style type="text/css">

        table{
            table-layout: fixed;
            width: 170px;
            height: 35px;
            font-size: 14px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;
        }

        table td {
            font-size: 12px;border-width: 1px;padding: 10px;border-style: solid;border-color: #9dcc7a;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 225px;
            white-space: nowrap;
        }

        table th {
            font-size:12px;color: black; background-color:#ffff99; border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
            text-align: center;
            width: 230px;
        }

        #table tr {background-color:#ffffff;}
        #table tr:hover {background-color:#ffff99;}

        ::selection {
        background-color: orange;
        color: blue;
        }



    #tableheader
        th {
            font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;
            text-align: left;
            width: 230px;

            </style>

    </head>
    <body>

        <table class="table" border="1">
        <tr><th>Header</th></tr>
        <tr><td onclick="this.select()">This will be highlighted on click. It should also be copied to clipboard automatically</td></tr>
        </table>

我期待收到你们的回复。

最佳，

杰森

Answer 1

您确实可以使用JavaScript（尤其是某些库）将某些文本（可能从当前页面的某个位置）直接复制到用户的剪贴板中。

请参阅使用post库的clipboard.js。

我们的想法是将一个特定的类（例如btn）添加到应该可点击的元素中，以及在点击时必须将哪些内容复制到剪贴板。

<td class="btn">This will be ...</td>

然后添加剪贴板API之后的功能：

var clipboard = new Clipboard('.btn', {
    // The selection of the correct content is done here.
    text: function(trigger) {
        return trigger.innerHTML;
    }
    //clipboard.js will take the entire inner content of the clicked element.
});

为您的案例演示：http://jsfiddle.net/kv9ymLjn/

您还可以重新实现内容突出显示（剪贴板不需要，但它会向用户提供视觉反馈）。请参阅演示代码。

如问题评论中链接的帖子所示，最安全的方法是让用户执行实际的复制操作（例如Ctrl + C），同时通过自动突出显示所需文本来帮助他/她。

另一方面，剪贴板库可能无法在所有环境中使用，即使最常见的也是如此。

html表中的自动复制文本

1 个答案: