Autocopy text inside html table

Question

Hope everyone's doing okay. I have created an HTML with some CSS. What it does is it highlights the table on hover and highlights the entire text line inside the table on click. Next thing that I wanted to achieve is to autocopy the highlighted text or do autocopy on click. I tried some google chrome autocopy extension, however, it's not working. Just like it's not working on google spreadsheet cells.

I've been thinking about javascript, but I'm not really sure if this can be done to autocopy a highlighted text inside an HTML table.

Any advice or tips on this one?

    <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>

I'm looking forward to hearing back from you.

Best,

Jason

Autocopy in terms of [storing the string in the users clipboard](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) ? — LJᛃ, Nov 09 '15 at 04:06
I read through that blog and tried the scripts. They actually work, but not on the texts inside the table. — JAMES, Nov 09 '15 at 04:45

score 1 · Answer 1 · answered Nov 09 '15 at 05:39

You can indeed use JavaScript (and especially some libraries) to achieve copying some text (possibly from somewhere in your current page) directly into the user's clipboard.

Please refer to that post which uses the clipboard.js library.

The idea is to add a specific class (e.g. btn) to the elements which should be clickable and which content must be copied to clipboard on click.

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

Then add the functionality following Clipboard 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.
});

Demo for your case: http://jsfiddle.net/kv9ymLjn/

You can also re-implement the content highlighting (Clipboard does not need that, but it gives a visual feedback to the user). See the demo code.

As shown in the post linked in the question comments, the safest way is to let the user performing the actual copying action (e.g. Ctrl + C), while helping him/her by auto highlighting the desired text.

The Clipboard library on the other hand may not work in all environments, even though the most common are covered.

Autocopy text inside html table

1 Answers1