javascript - 如何在双击时选择和复制多个 <td> 值？

Question

我想选择多个然后复制(ctrl+c)。在我的代码中是

<table id="tbl1" border="1">
<tr>
    <td>first</td>
    <td>second</td>
</tr>
<tr>
    <td>third</td>
    <td>4th</td>
</tr>
<tr>
    <td>5th</td>
    <td>6th</td>
</tr>
</table>

我的表格将显示为

______________
|first|second|
_____________
|third|4th   |
_____________
|5th  |6th   |
______________

在这里，如果我双击“second”、“third”和“5th”，那么应该选择这 3 个单元格，然后我将使用 ctrl+c 将这些数据复制并粘贴到写字板中，我尝试了 dblclick 但它有效仅在 Firefox 中。

Answer 1

我做了这个片段(测试:在 Chrome 和 Firefox 上工作):

function copyToClipboard(text) {
    var $temp = $('<input>');
    $('body').append($temp);
    $temp.val(text).select();
    document.execCommand('copy');
    $temp.remove();
}

$(function($) {
    var ctrlDown = false;
    var ctrlKey = 17;
    var cmdKey = 91;
    var cKey = 67;

    $(document).keydown(function(e) {
        // if (CTRL + C)
        if (ctrlDown && (e.keyCode == cKey)) {
            copyToClipboard(selection.join(' '));
            selection = [];
            return false;
        }
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
            ctrlDown = true;
        }
    }).keyup(function(e) {
        if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
            ctrlDown = false;
        }
    });

    var selection = [];
    $('#tbl1 td').dblclick(function() {
        selection.push(this.innerHTML);
        $('#copyingText').val(selection.join(', '));
    });
});

td {
  padding: 10px;
  width: 50px;
  background-color: #555;
  text-align: center;
  color: #fff;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tbl1" border="1">
    <tr>
        <td>first</td>
        <td>second</td>
    </tr>
    <tr>
        <td>third</td>
        <td>4th</td>
    </tr>
    <tr>
        <td>5th</td>
        <td>6th</td>
    </tr>
</table>

<hr>
<input type="text" id="copyingText" value="">
<input type="text" placeholder="paste text here">

引用资料:

• Detect CTRL+c.
• Trigger CTRL+c.