How to select and copy multiple value on double click?

Question

i want to select multiple and then copy (ctrl+c).in my code is

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

my table will show like

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

Here if i double click over "second" , "third" and "5th" then this 3 cells should be selected and then i will use ctrl+c to copy and paste this data in wordpad,i tried dblclick but it works only in firefox.

simply i want to select and copy "second" , "third" and "5th" — Joker, Aug 11 '16 at 11:18
i have used... function dblclick(e,uri,dec,ip,tariff,serv) { if (parseInt(navigator.appVersion)>3) { var evt = e ? e:window.event; var ctrlPres=0; var altPres=0; var shiftPres=0; shiftPres=evt.shiftKey; altPres =evt.altKey; ctrlPres =evt.ctrlKey; self.status="" + "shiftKey="+shiftPres +", altKey=" +altPres +", ctrlKey=" +ctrlPres if (shiftPressed) { /**some data**/ } } } — Joker, Aug 11 '16 at 11:33
@Joker : Please post your full code. If possible create a jsfiddle. — Aneesh Sivaraman, Aug 11 '16 at 11:34

score 2 · Accepted Answer · edited May 23 '17 at 12:00

I did this snippet (tested: working on Chrome and 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">

References:

Glad to see it worked now.. Any questions, feel free to ask :) — Washington Guedes, Aug 11 '16 at 13:59

score 0 · Answer 2 · answered Aug 11 '16 at 11:14

0

Try adding event listner for double click like this

 srcBox.addEventListener("dblclick", hiLite, false);

answered Aug 11 '16 at 11:14

shaifali Gupta

380
1
4
16

score 0 · Answer 3 · answered Aug 11 '16 at 11:18

0

You can use .dblclick() to achieve this ( https://api.jquery.com/dblclick/ ). Then just use jQuery to select what you need.

answered Aug 11 '16 at 11:18

Bart

1
2

dblclick working properly.. but the problem is i couldn't select "second" , "third" and "5th" at a time. – Joker Aug 11 '16 at 11:26

How to select and copy multiple value on double click?

3 Answers3